Question

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

提取已点击单元格的索引及其所属行的索引。
突出显示所选单元格，并在再次单击时删除突出显示。
跟踪选中的单元格，以便将其保存到数据库中。

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

$("#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是您用来传递信息的隐藏输入。

Answer 2

你可以通过尝试计算行等来实现这一点，但我喜欢的一种方法当我以编程方式编写我的表格时是在我写出来时为每个单元格添加类这样每个单元格都有一个类告诉我它在哪里，所以我可以很快地解决它：

<table>
   <tr class="row1">
      <td class="row1 col1">Something</td>
      <td class="row1 col2">Something else</td>
      ...
      <td class="row1 col10">Final thing</td>
   </tr>

   <tr class="row2">
      <td class="row2 col1">Something</td>
      <td class="row2 col2">Something else</td>
      ...
      <td class="row2 col10">Final thing</td>
   </tr>

   <tr class="row3">
      <td class="row3 col1">Something</td>
      <td class="row3 col2">Something else</td>
      ...
      <td class="row3 col10">Final thing</td>
   </tr>
</table>

现在，在你的jQuery中：

$('td').click(function() {
   var classes = $(this).attr('class').split(/\s+/),
       col,
       row,
       i;

   for (i in classes) {
      if (classes[i].substring(0,2) == 'col') { col = classes[i].substring(3); }
      if (classes[i].substring(0,2) == 'row') { row = classes[i].substring(3); }
   }

   alert('You clicked the cell on row ' + row + ' and column ' + col);
});

这看起来有点笨拙，但我喜欢它的是我可以很快地解决表格中的每个单元格：

$('td.row2.col3').text(); // will quickly grab the contents of cell r2,c3

我希望这有用。

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

2 个答案: