[JavaScript] Dom형식 Script사용

-결과화면-
----------------------------------------------------------
   번호                이름                 나이                   비고
----------------------------------------------------------
     1                홍길동                 22                      비고1
     2                이순신                 22                      비고2
     3                유관순                 22                      비고3
----------------------------------------------------------

<table name="leftTable" id="leftTable">
<tr>

<td>//홍길동

<input ---------------- onclick="test(this);")  //번호

</td>
<td>//홍길동

<input ---------------- onclick="test(this);")  //이름

</td>

...
..
..
...
...

</tr>
<tr>

<td>//이순신

<input ---------------- onclick="test(this);")   //번호

</td>
<td>//이순신

<input ---------------- onclick="test(this);")   //이름

</td>
..
..
...
...

</tr>
<tr>

<td>//유관순

<input ---------------- onclick="test(this);")  //번호

</td>
...
..
..
...
...

</tr>
</table>


이런식으로 테이블이 구성이 된다.

function test(obj) {

var indx = obj.parentNode.parentNode.rowIndex;   //클릭한 input 라인의 rowIndex
            (input)     (td)          (tr)         (해당라인의 rowIndex)

var table_length = document.all.leftTable.rows.length; //해당Table의 row length
 

var num= obj.parentNode.parentNode.childNodes.item(0).childNodes.item(0).value;  //클릭한 input 라인의 번호
           (input)   (td)           (tr)          (첫번째 tag -> td)             (첫번째 tag -> input)

var name = obj.parentNode.parentNode.childNodes.item(1).childNodes.item(0).value;  //클릭한 input 라인의 이름
            (input)    (td)           (tr)          (두번째 tag -> td)             (두번째 tag -> input)
var age = obj.parentNode.parentNode.childNodes.item(2).childNodes.item(0).value;  //클릭한 input 라인의 나이
            (input)    (td)           (tr)          (세번째 tag -> td)             (세번째 tag -> input)

}

reference : DOM은 W3C DOM Technical Reports (HTML 접근 부분은 DOM Level2 HTML)에서 볼 수 있다.