可点击表格

Question

我在JS中创建了一个生成表的简单函数。现在我想这样做：当我点击表的某个单元格时，页面将提醒值单元格内的内容：变量b，正如您在代码中看到的那样。我试过了，但没有成功。在代码中。我还使用了Jquery。

代码：JS

function gen() {
var rowData = '';
for (var a = 0; a < 5; a++) {
rowData += '<tr>';
for (var i = 0; i < 3; i++) {

rowData += '<td>';
rowData += b;
rowData += '</td>';
b++;
}
rowData += "</tr>";

}
$('#myTableId2').append(rowData);

}

HTML:

<table id="myTableId2"> </table>
<button onclick="gen()">Generate</button>

Answer 1

rowData += '<td onclick="alert(this.innerHTML)">';

Answer 2

我看到您正在使用jQuery。您可以将click()事件附加到每个<td>元素，如下所述。

请注意，由于b在您的示例中是未定义的，为了便于说明，我随意给它一个随机值。

function gen() {
let b = Math.floor(Math.random() * 1000) + 1; //generate random value
var rowData = '';
for (var a = 0; a < 5; a++) {
rowData += '<tr>';
for (var i = 0; i < 3; i++) {
rowData += '<td>';
rowData += b;
rowData += '</td>';
b++;
}
rowData += "</tr>";
}
$('#myTableId2').append(rowData);
//attach the click event using jQuery
$("td").click(function(){alert(this.innerText)});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTableId2"> </table>
<button onclick="gen()">Generate</button>