现在的位置: 首页 > 综合 > 正文

JavaScript操作table

2013年10月26日 ⁄ 综合 ⁄ 共 1489字 ⁄ 字号 评论关闭
<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);

抱歉!评论已关闭.