# 分數計算

• +10 points for not using JQuery
• +15 points for the cells scaling equally to keep the same table aspect ratio when the browser is scaled
• +15 points for accomplishing the last thing without using any kind of CSS
• +20 points if you do not label the cells' tags with coordinates (it counts if you make an JavaScript array like {"cell1-1": ..., "cell1-2": ..., "cell1-3": ...} but it doesn't count when you label the <td> tag itself, like <td id="cell-7-9"> or <td class="cell-8-1">)

So if you have 67 upvotes, no jQuery (+10), the cells scaling (+15) but by using CSS (no +15) and you do not label the cells (+20), then your score will be 67 + 10 + 15 + 0 + 20 = 112.

WINNERS:
Doorknob -> 61 + 3 = 64 points
Victor, with 60 + 1 = 61 points
they have very close scores so I couldn't exclude Victor.

# 得分：61

## JavaScript的

var w = h = 20, color = 'red'
function createTable() {
var tbl = document.createElement('table')
tbl.id = 'tbl'
for (var i = 0; i < h; i++) {
var tr = document.createElement('tr')
for (var i2 = 0; i2 < w; i2++) {
var td = document.createElement('td')
tr.appendChild(td)
}
tbl.appendChild(tr)
}
document.body.appendChild(tbl)
return tbl
}
function killTable(tbl) {
tbl.parentNode.removeChild(tbl)
}
var tbl = createTable()

function draw(e) {
e.preventDefault()
this.style.backgroundColor = color
}

function finalize() {
var tds = document.getElementsByTagName('td')
for (var i = 0; i < tds.length; i++) {
tds[i].style.border = 'none'
tds[i].removeEventListener('mousedown', draw)
}
document.getElementById('optionsWrapper').style.display = 'none'
}

function changeColor() {
color = document.getElementById('color').value
}

function changeDims() {
var dims = document.getElementById('dims').value.split('x')
w = +dims[0], h = +dims[1]

killTable(tbl)
tbl = createTable()
}


## HTML

<div id='optionsWrapper'>
<button id='finalize'>Finalize</button>
Color: <input id='color' type='text' value='red' /><button id='changeColor'>Go</button>
Change dimensions (WARNING: will erase drawing): <input id='dims' type='text' value='20x20' /><button id='changeDims'>Go</button>
</div>


# CSS

td {
width: 5px;
height: 5px;
border: 1px solid black;
}

table {
border-collapse: collapse;
}


## 的jsfiddle

http://的jsfiddle.net/D9u2N/1/