如何使用 JavaScript 从表中的行索引中获取行 ID答案

【问题标题】：How to get row id from row Index in table using JavaScript如何使用 JavaScript 从表中的行索引中获取行 ID
【发布时间】：2012-12-06 14:51:02
【问题描述】：

假设这是我的桌子：

<table>
    <tr id="a">
       <TD>a</TD>
    </tr>
    <tr id="b">
       <TD>b</TD>
    </tr>
</table>

如何使用表中的行索引获取行 ID？

以上只是 id 是静态的示例，但在我的情况下，我的 id 是动态的，所以我不能使用 document.getElementById().

【问题讨论】：

【解决方案1】：

假设您的页面上只有一个表格：

document.getElementsByTagName("tr")[index].id;

最好不过，你会给你的table 一个id，不过，你的行是这样的：

<table id="tableId">
    <tr id="a">
        <td>a</td>
    </tr>
    <tr id="b">
        <td>b</td>
    </tr>
</table>

var table = document.getElementById("tableId");
var row = table.rows[index];
console.log(row.id);

这样，如果您的页面中有多个表格，您可以确定不会受到任何干扰。

【讨论】：

【解决方案2】：

“那么，我如何使用表中的行索引获取行 ID”

您将选择table，并使用.rows 属性按索引获取行。

var table = document.getElementsByTagName("table")[0]; // first table

var secondRow = table.rows[1]; // second row

然后您只需以典型方式获取 ID。

console.log(secondRow.id); // "b"

演示： http://jsfiddle.net/MErPk/

【讨论】：

【解决方案3】：

答案已编辑 使用 CSS3，您可以使用 nth-child 选择器。这里的示例显示 rowIndex = 2

 alert(document.querySelector("table tr:nth-child(2)").id);

在 jQuery 中你可以这样做

 alert($("table tr:nth-child(2)").attr('id'));

同样的语法 nth-child() 可以在 CSS 中使用

<style>
    tr:nth-child(2) {
        color: red;
    }
</style>

【讨论】：