如何使用Javascript获取表格的当前行索引？

14 浏览
0 Comments

如何使用Javascript获取表格的当前行索引？

在JavaScript中，我可以获取表格的当前行索引吗？如果我们获取到了当前索引，我们可以删除表格中的该行吗？

0

3 答案

0 Comments

问题的出现原因：

用户想要通过JavaScript获取表格中当前行的索引。

解决方法：

用户可以使用以下代码来找到当前行/列。注意，我使用parentNode来获取所需的<tr>元素的rowIndex：

var table = document.getElementById("clickTable");
    for (var i = 0; i < table.rows.length; i++) {    
      for (var j = 0; j < table.rows[i].cells.length; j++){
        table.rows[i].cells[j].onclick = function () {
          r = this.parentNode.rowIndex;  
          c = this.cellIndex;
          alert("you clicked on\n column: "+c+"\n row:"+r);
        };
      }
    }

    <table id="clickTable" border="1" cellpadding="15">
    <tr><td>A1</td><td>B1</td><td>C1</td></tr>
    <tr><td>A2</td><td>B2</td><td>C2</td></tr>
    <tr><td>A3</td><td>B3</td><td>C3</td></tr>
    </table>

0
0 Comments

问题的原因是在使用rowIndex属性时返回undefined，因为rowIndex是TR（表格行）的一个属性，所以需要先找到匹配的TR。

解决方法是将onclick事件绑定到TR元素上，并将this作为参数传递给myFunction函数。然后在myFunction函数中使用this.rowIndex来获取当前行的索引。

下面是修复后的代码：

<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

function myFunction(x) {
  console.log("Row index is: " + x.rowIndex);
}

现在当点击表格的某一行时，将会在控制台输出当前行的索引。

0
0 Comments

我如何使用JavaScript获取表格的当前行索引？

问题的原因：我不使用jQuery，因此无法使用`index()`方法来获取表格的当前行索引。

解决方法：如果不使用jQuery，可以通过循环遍历所有的`

`元素来找到匹配的行，并获取其索引。

代码示例：

var index = -1;
var rows = document.getElementById("yourTable").rows;
for (var i=0; i



以上是使用JavaScript的解决方法，当然如果你使用jQuery，可以直接使用`.index()`方法来获取当前行索引。


代码示例：




var index = $('table tr').index(tr);





以上是使用jQuery的解决方法。


希望以上的解决方法能够帮助到你！
0