JavaScript操作table

原创 2007年09月26日 21:29:00
<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);

使用table自带方法和DOM方法操作HTML table的区别

注:使用createDocumentFragment创建TABLE 行的效率要高 使用table自带方法和DOM方法操作HTML table的区别 table表格的操作有两种方法,...
  • hongweigg
  • hongweigg
  • 2015年01月05日 17:22
  • 1475

用Javascript实现对HTML表格简单的增删查改

在网页制作的过程中,有时候需要对表格进行操作,下面是一个简易的表格操作方案: 对表格操作 *{ padding:0px; margn:0px; } ta...
  • qq_33220449
  • qq_33220449
  • 2016年08月08日 14:27
  • 5512

原生js 操作表格 增删行和列

本来觉得这个挺好做的,可是当自己动手写的时候,发现会出现各种各样的问题。。。若不是同学问我,估计还真的把这些给忘记了呢。。。不多说,上代码。 无标题文档 ...
  • u012679583
  • u012679583
  • 2016年01月12日 14:36
  • 1657

javascript操作table的动态添加行和删除行

动态添加表格行和删除行,ie9和
  • u010785969
  • u010785969
  • 2014年11月22日 21:49
  • 594

javascript操作table增加,批量删除,模糊查询,文本框修改(兼容IE,FF)

先看代码:   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  http://www.w3.org/1999/xhtml">...
  • vera514514
  • vera514514
  • 2013年01月05日 09:25
  • 234

javascript操作table(insertRow(),deleteRow(),insertCell(),deleteCell()方法)

insertRow() 方法 定义和用法 insertRow() 方法用于在表格中的指定位置插入一个新行。 语法 tableObject.insertRow(index) 返回值 返回...
  • fox123871
  • fox123871
  • 2011年08月11日 13:43
  • 1281

JavaScript操作table

内容 类别 操作 内容: 类别: function insertToRow() { ...
  • sanfran_qi
  • sanfran_qi
  • 2012年11月28日 09:06
  • 194

[JavaScript][jQuery]jQuery操作Table

jQuery操作Table 操作: 1.鼠标移动行变色 方法一:jQuery中的hover(fun(),fun())方法,参数一:第一个方法是添加样式功能,参数二:第二个方法是取消样...
  • szwangdf
  • szwangdf
  • 2012年02月25日 13:34
  • 4976

好好学一遍javaScript 笔记(四)——Attribute、HTML元素、文档碎片、table操作

欢迎技术交流。 QQ:138986722 getAttribute、setAttribute获取跟设置对象的属性: function documentTest(){ var oHtm...
  • hzw2312
  • hzw2312
  • 2011年12月27日 14:25
  • 2077

JavaScript操作Table:添加、修改、删除Table元素

方法一:DOM实现 //先获取该表格的引用: var Container = document.getElementById(TableId); //然后创建行(TR对象) var N...
  • guoxuepeng123
  • guoxuepeng123
  • 2012年08月08日 10:13
  • 563
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript操作table
举报原因:
原因补充:

(最多只允许输入30个字)