jquery - 使用 jQuery 提取单击的 HTML 表格的单元格索引

Question

我正在寻找一种使用 jQuery 对普通 HTML 表格执行以下操作的方法。

1. 提取被单击单元格的索引及其所属行的索引。
2. 突出显示所选单元格，并在再次单击时取消突出显示。
3. 跟踪选定的单元格，以便我可以将它们保存到数据库中。

这是我到目前为止所做的:

$("#frame td").click(function(e) {

    var RowSelected = $(this).parent().parent().children().index($(this).parent());
    var CellSelected = e.target.cellIndex;

    $(this).toggleClass("selected", this.clicked);

    $("#cells").append("R" + RowSelected + "C" + CellSelected + ", ");

});

Answer 1

DOM 为您提供了 rowIndex 以及 cellIndex，无需疯狂的 jQuery index 工作。

此外，如果您将选定单元格列表的生成推迟到提交时间，您将不必尝试通过在点击时添加和删除元素来跟踪它们:

$('#frame td').click(function() {
    $(this).toggleClass('selected');
});

$('#someform').submit(function() {
    $('#cells').val(
        $('#frame td.selected').map(function() {
            return 'R'+this.parentNode.rowIndex+'C'+this.cellIndex;
        }).get().join(', ')
    );
});

假设#cells是您用来传递信息的隐藏输入。