어떻게 자바 스크립트

Question

는 가정 사용하여 테이블의 행 인덱스에서 행 ID를 얻기 위해이 내 테이블 :

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

어떻게 테이블에서 행 인덱스를 사용하여 행 ID를받을 수 있습니까?

위의 예는 id가 정적이지만 내 경우 ID가 동적 인 예이므로 document.getElementById()을 사용할 수 없습니다.

Answer 1

당신이 당신의 페이지에 하나 개의 테이블을 가지고 가정 :하지만 바람직

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

, 당신은 당신의 tableid, 생각을 줘야 할 것 다음과 같이 행을 만드세요.

<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); 

이 방법, 당신은 당신이 당신의 페이지에 여러 테이블이있는 경우, 어떠한 간섭도하지 않습니다 확신 할 수 있습니다.

Answer 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" 

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

Answer 3

대답은 CSS3와 당신이 n 번째 자녀 selctor을 사용할 수 있습니다 편집되었습니다. 다음 예는 rowIndex에 보여준다 = 2

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

jQuery를에서는

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

와 동일한 구문 n 번째 자식이를 수()은 CSS에서 사용될 수

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