JavaScript操作table

< html >
     < head >
         < title ></ title >
         < SCRIPT LANGUAGE = " JavaScript " >
         function  showTable(id){
           var  tb = document.getElementById(id);
           var  rows = tb.rows;
           for ( var  i = 0 ;i < rows.length;i ++ ){
              var  cells = rows[i].cells;
              for ( var  j = 0 ;j < cells.length;j ++ ){
                 alert(cells[j].childNodes[ 0 ].value);
             }
          }
         }
          function  showTd(id){
              var  td = document.getElementById(id);
              var  cell = td.parentElement;
             alert(cell.childNodes[ 0 ].value);
             alert(cell.cellIndex);
         }
         </ SCRIPT >
     </ head >
     < body >
         < input type = " button "  onclick = " showTable('mailTable'); "  value = " 遍历table " />
         < input type = " button "  onclick = " showTd('th01Input'); "  value = " 取得td的index " />
         < table id = " mailTable " >
             < tr >
                 < th >< input value = " th00 " ></ th >
                 < th >< input name = " th01Input "  value = " th01 " ></ th >
             </ tr >
             < tr >
                 < td >< input value = " th10 " ></ td >
                 < td >< input value = " th11 " ></ td >
             </ tr >
             < tr >
                 < td >< input value = " th20 " ></ td >
                 < td >< input value = " th21 " ></ td >
             </ tr >
         </ table >
     </ body >
</ html >

写个例子备忘.

另外ie,firefox以及其它浏览器对于 table 标签的操作都各不相同，
在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，
使用appendChile方法也不管用。

//向table追加一个空行：
var otr = otable.insertRow(-1);
var otd = document.createElement("td");
otd.innerHTML = " 测试";
otd.className = "css";
otr.appendChild(otd);