关闭

JavaScript操作table

1155人阅读 评论(0) 收藏 举报
<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);

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:653804次
    • 积分:6849
    • 等级:
    • 排名:第3380名
    • 原创:81篇
    • 转载:18篇
    • 译文:0篇
    • 评论:278条
    最新评论