javascript - 使用 JavaScript 定位表格单元格

Question

我编写了一个 JavaScript 函数，可以根据用户指定的行数和列数动态插入 tr 和 td。我正在尝试编写另一个函数，该函数允许我在单击表格的特定单元格时执行某些操作。

这是生成表格的函数

$('#submit').on('click', function() {

        numOfRow = $('#height').val();
        numOfCol = $('#width').val();
        const body = $('.grid-canvas');

        for (var i = 1; i <= numOfRow; i++) {
            let row = $('<tr id=\'' + i + '\'></tr>');

            for (col = 1; col <= numOfCol; col++) {
                row.append('<td id=\'' + col + '\'></td>');
            }

            body.append(row);
        }
    });

这就是我动态生成的表格的样子

<table class="table-bordered">
<tbody class="grid-canvas">
    <tr id="1">
        <td id="1"></td>
        <td id="2"></td>
    </tr>
</tbody>
</table>

多次尝试使用索引，但对我来说很明显它不起作用。然而，这就是我在单击单元格时执行某些操作的功能

let boxToFill = $('td').index();
    $(boxToFill).click(function() {
        console.log(boxToFill);
    });

请问定位特定表格单元格的正确方法是什么？这是我使用 javascript 的一个学习过程。

Answer 1

我把所有内容都放在一个小例子中

function fillBox(element) {
    // do something with element
    element.style.backgroundColor = "red"
}
$(document).ready(() => {

    $('#submit').on('click', function () {

        numOfRow = 3;
        numOfCol = 5;
        const body = $('.grid-canvas');

        for (var i = 1; i <= numOfRow; i++) {
            let row = $('<tr id=\'' + i + '\'></tr>');

            for (col = 1; col <= numOfCol; col++) {
                row.append('<td onclick="fillBox(this)" id=\'r' + i + 'c' + + col + '\'>test</td>');
            }
            body.append(row);
        }
    });
});

tr{
  padding:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="submit">create</button>
<table class="table-bordered">
    <tbody class="grid-canvas">
    </tbody>
</table>