我必须双击单元格才能将其涂成彩色 - JavaScript

Question

我HTML里有一个表，上面有这样的onclick事件：

<table onclick="cellClicked();">

问题是，要开始为表格中的单元格着色，我必须事先单击表格中的任何位置。绘制单元格的函数是：

function cellClicked() {
var table = document.getElementsByTagName("table")[0];
var cells = table.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
cell.onclick = function() {
var columnIndex = this.cellIndex;
var rowIndex = this.parentNode.rowIndex;
var rowSelected = table.getElementsByTagName('tr')[rowIndex];
var cellSelected = rowSelected.getElementsByTagName('td')[columnIndex];
cellSelected.style.backgroundColor = "black";
}
}
}

非常感谢您的帮助。问候！

Answer 1

在 javascript 中应用单元格的 onClick 处理程序。

您可以：

1. 定义后立即调用它，
2. 等待 DOM 内容加载然后执行它，或者
3. 仅在呈现表时调用设置单元格的函数。

function initCellClickers() {
var table = document.getElementsByTagName("table")[0];
var cells = table.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
cell.onclick = function() {
var columnIndex = this.cellIndex;
var rowIndex = this.parentNode.rowIndex;
var rowSelected = table.getElementsByTagName('tr')[rowIndex];
var cellSelected = rowSelected.getElementsByTagName('td')[columnIndex];
cellSelected.style.backgroundColor = "black";
}
}
}
// 1. just call it immediately, it'll set up the click handler when it initializes.
initCellClickers()
// 2. you might need to wait for content to load
document.addEventListener('DOMContentLoaded', e => { 
initCellClickers() 
})
// 3. or if the table is conditionally rendered: 
if(/*table rendered condition*/) {
initCellClickers()
}

让我知道这是否适合您，或者您有任何问题。

Answer 2

如果我们在每个td元素上附加一个click事件呢？我已经稍微更改了代码。

请找一个例子 - 只是用一个随机table代替表示：

const table = document.getElementById('yourTable');
const cells = table.getElementsByTagName('td');
for (let i = 0; i < cells.length; i++) {
cells[i].addEventListener('click', (e) => {
cells[i].style.backgroundColor = 'black';
});
}

<table id="yourTable">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

我希望这有帮助！