tr rowIndex 属性

在Web前端开发中，表格是一个非常常见的元素，而tr元素则是表格的行元素。在表格中，每一行都有一个对应的索引值，可以通过该索引值来操作表格中的行。在本文中，我们将重点介绍tr元素的rowIndex属性，帮助您更好地理解和使用表格行。

什么是rowIndex属性

rowIndex属性是tr元素的一个只读属性，用于获取该行在表格中的索引值。在一个表格中，每一行都有一个唯一的索引值，从0开始递增。通过rowIndex属性，我们可以轻松地获取到当前行在表格中的位置。

如何使用rowIndex属性

要使用rowIndex属性，首先需要获取到对应的tr元素。可以通过以下几种方式来获取tr元素：

通过表格的rows属性获取tr元素

// www.javascriptcn.com code example
<table id="myTable">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

<script>
  const table = document.getElementById('myTable');
  const row = table.rows[0]; // 获取第一行的tr元素
  console.log(row.rowIndex); // 输出 0
</script>

通过querySelector方法获取tr元素

// www.javascriptcn.com code example
<table id="myTable">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

<script>
  const row = document.querySelector('#myTable tr');
  console.log(row.rowIndex); // 输出 0
</script>

通过parentNode属性获取tr元素

// www.javascriptcn.com code example
<table id="myTable">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

<script>
  const cell = document.querySelector('#myTable td');
  const row = cell.parentNode;
  console.log(row.rowIndex); // 输出 0
</script>

使用示例

下面是一个简单的示例，演示如何使用rowIndex属性来获取表格行的索引值，并根据索引值进行样式修改：

// www.javascriptcn.com code example
<table id="myTable">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

<script>
  const table = document.getElementById('myTable');
  const rows = table.rows;

  for (let i = 0; i < rows.length; i++) {
    rows[i].addEventListener('click', function() {
      this.classList.toggle('highlight');
      console.log(`Clicked row ${this.rowIndex}`);
    });
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }
</style>

在上面的示例中，当点击表格的某一行时，会给该行添加或移除highlight类，实现行的高亮效果，并通过console.log输出行的索引值。

通过本文的介绍，相信您已经对tr元素的rowIndex属性有了更深入的了解，并能够更好地利用它来操作表格行。希望本文能够帮助到您，在Web前端开发中更加得心应手！