单元格由行列下标来定位(从0开始),题主直接设置列9,10,11可是包含了所有处于这些列的行了,但是截图明显不是。
设置背景色应该写个while循环什么的,依次输入行列下标进行设置,输入指定值退出循环,示例代码如下
<!doctype html>
<style>
table.good{border-collapse:collapse;}
table.good td{border:solid 1px #ccc;padding:3px 5px;width:60px;height:20px;line-height:20px}
</style>
<table class="good" cellspacing="0" id="tb">
<tr><td>列1</td><td>列2</td><td>列3</td><td>列4</td><td>列5</td><td>列6</td><td>列7</td><td>列8</td><td>列9</td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table><br />
<input type="button" value="新增列" onclick="insertCol()" /><br /><input type="button" value="设置颜色" onclick="setColor()" />
<script>
var tb = document.getElementById('tb');
function insertCol() {
var colNum = tb.rows[0].cells.length + 1;
for (var i = 0; i < tb.rows.length; i++) {
var td = document.createElement('td');
if (i == 0) td.innerHTML = '列' + colNum;
tb.rows[i].appendChild(td);
}
}
function setColor() {
while (true) {
var cmd = prompt('输入行列下标,如“1,1”,输入exit退出设置颜色');
if (cmd == 'exit') break;
if (!/^\d+,\d+$/.test(cmd)) {
alert('行列下标数据格式错误,请输入“数字,数组”组合');
continue;
}
var arr = cmd.split(',').map(i => parseInt(i));
if (arr[0] > tb.rows.length || arr[1] > tb.rows[0].cells.length) {
alert('输入的行下标和列下标需要小于表格中存在的行和列数量!')
continue;
}
var color = prompt('输入背景色:');
//下标从0开始,所以要减1
tb.rows[arr[0]-1].cells[arr[1]-1].style.backgroundColor = color;
}
}
</script>
由行和列共同确定的单元格背景色, row: {color: [“第一列颜色”,“第二列颜色”,...]}, 根据列的index去row.color[index]