如何使用JavaScript从表中的行索引获取行id

Suppose this is my table:

假设这是我的桌子:

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

How can I get row id using the row index from a table?

如何使用表中的行索引获取行id ?

Above is just an example where id is static but in my case my id is dynamic, so I can't use document.getElementById().

上面只是一个id是静态的例子，但是在我的例子中，我的id是动态的，所以我不能使用document.getElementById()。

3 个解决方案

#1

Assuming you have only one table on your page:

假设你的页面上只有一个表格:

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

Preferably though, you'd give your table a id, though, and get your row like this:

不过，你最好给你的表一个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);

This way, you can be certain you don't get any interference, if you have multiple tables in your page.

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

#2

"So, How can i get row id using row Index from a table"

“那么，如何使用表中的行索引获得行id”

You would select the table, and use the .rows property to get the row by index.

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

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

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

Then you just get the ID in the typical manner.

然后用典型的方式得到ID。

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

DEMO: http://jsfiddle.net/MErPk/

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

#3

Answer has been edited With CSS3 you can use the nth-child selctor. Here the example shows the rowIndex = 2

答案已与CSS3编辑，您可以使用第n子selctor。这里的示例显示了rowIndex = 2

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

In jQuery you can do this with

在jQuery中，您可以这样做

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

The same syntax nth-child() can be used in CSS

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

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

#1