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

更新时间：2013年12月16日 10:14:24 作者：

本篇文章主要介绍了javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法)需要的朋友可以过来参考下，希望对大家有所帮助

insertRow() 方法

定义和用法

insertRow() 方法用于在表格中的指定位置插入一个新行。

语法

tableObject.insertRow(index)

返回值

返回一个 TableRow，表示新插入的行。

说明

该方法创建一个新的 TableRow 对象，表示一个新的 <tr> 标记，并把它插入表中的指定位置。

新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。

如果表是空的，则新行将被插入到一个新的 <tbody> 段，该段自身会被插入表中。

抛出

若参数 index 小于 0 或大于等于表中的行数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。

例子

复制代码代码如下:

<html>
<head>
<script type="text/javascript">
function insRow()
{
document.getElementById('myTable').insertRow(0)
}
</script>
</head>

</body>
</html>

deleteCell()

定义和用法

deleteCell() 方法用于删除表格行中的单元格（<td> 元素）。

语法

tablerowObject.deleteCell(index)

说明

参数 index 是要删除的表元在行中的位置。

该方法将删除表行中指定位置的表元。

抛出

若参数 index 小于 0 或大于等于行中的的表元数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。

例子

复制代码代码如下:

<html>
<head>
<script type="text/javascript">
function delRow()
{
document.getElementById('myTable').deleteRow(0)
}
</script>
</head>
<body>

</body>
</html>

insertCell()

定义和用法

insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。

语法

tablerowObject.insertCell(index)

返回值

一个 TableCell 对象，表示新创建并被插入的 <td> 元素。

说明

该方法将创建一个新的 <td> 元素，把它插入行中指定的位置。新单元格将被插入当前位于 index 指定位置的表元之前。如果 index 等于行中的单元格数，则新单元格被附加在行的末尾。

请注意，该方法只能插入 <td> 数据表元。若需要给行添加头表元，必须用 Document.createElement() 方法和 Node.insertBefore() 方法（或相关的方法）创建并插入一个 <th> 元素。

抛出

若参数 index 小于 0 或大于等于行中的的表元数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。

例子

复制代码代码如下:

<html>
<head>
<script type="text/javascript">
function insCell()
{
var x=document.getElementById('tr2').insertCell(0)
x.innerHTML="John"
}
</script>
</head>
<body>

<table border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="insCell()" value="Insert cell">

</body>
</html>

deleteCell()

定义和用法

deleteCell() 方法用于删除表格行中的单元格（<td> 元素）。

语法

tablerowObject.deleteCell(index)

说明

参数 index 是要删除的表元在行中的位置。

该方法将删除表行中指定位置的表元。

抛出

若参数 index 小于 0 或大于等于行中的的表元数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。

例子

复制代码代码如下:

<html>
<head>
<script type="text/javascript">
function delCell()
{
document.getElementById('tr2').deleteCell(0)
}
</script>
</head>
<body>

</body>
</html>

项目中的应用：

复制代码代码如下:

var trIndex = 0;

//动态增加行
unction appendConvert(){

//var sel = document.getElementById("selectConvertName");
var sel = document.getElementsByName("selectConvertName")[0];

var className;
if(null!=sel){
   for(var i = 0; i < sel.options.length; i++){
    if(sel.options[i].selected)
     className=sel.options[i].value;
   }
}
//数据来源于ajax，json形式。
convert.getConvertBean2Json(className,
    function(result) {
   var obj = eval('('+result+')');
   var table = document.getElementById("convertTable");

   var newRow = table.insertRow(trIndex+1);
   newRow.insertCell(0).innerHTML = obj.name+"<input type='button' value='删除' onclick='deleteRow(this)'>";
   newRow.insertCell(1).innerHTML = "<input type='text' name='convertList["+trIndex+"].id'><input type='hidden' name='convertList["+trIndex+"].name' value='"+obj.name+"'>";
   if(null!=obj.paramList){
    var paramStr = "";
    for(var i = 0; i < obj.paramList.length; i++){
     paramStr = paramStr+
      "参数名："+obj.paramList[i].name+
      "；参数类型："+obj.paramList[i].type+
      "；参数值：<input name='convertList["+trIndex+"].paramList["+i+"].value' type='text'><br>"+
      "<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].name' value='"+obj.paramList[i].name+"'>"+
      "<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].type' value='"+obj.paramList[i].type+"'>";
    }
    newRow.insertCell(2).innerHTML = paramStr;
   }
   trIndex++;
});

}

//删除行
on deleteRow(r){
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('convertTable').deleteRow(i);
trIndex--;
}

</script>

您可能感兴趣的文章:

JS实现点击Radio动态更新table数据
这篇文章主要介绍了JS实现点击Radio动态更新table数据的相关资料,需要的朋友可以参考下
2017-07-07
防止文件缓存的js代码
原理其实就是通过在固定地址后面，加上一个不同值的日期数值，以达到地址不重复的目的，让浏览器每次都实时加载，不从缓存中读取文件
2013-01-01
bootstrap table表格使用方法详解
这篇文章主要为大家详细介绍了bootstrap table表格使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
JavaScript 斐波那契数列倒序输出输出100以内的质数代码实例
这篇文章主要介绍了JavaScript 斐波那契数列倒序输出输出100以内的质数代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
原生js实现简单的模态框示例
下面小编就为大家带来一篇原生js实现简单的模态框示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
JavaScript编程的10+最佳实践解决方案
在现代Web开发中，JavaScript已经成为无法替代的核心技术，在现代Web开发中，JavaScript已经成为无法替代的核心技术，本文将通过代码示例详细介绍一些实践解决方案，感兴趣的同学可以参考下
2023-06-06
页面中实现setInterval和setTimeout效果示例详解
这篇文章主要为大家介绍了不使用setTimeout和setInterval在页面中实现setInterval和setTimeout效果示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
原生JS实现随机点名项目的实例代码
这篇文章主要介绍了原生JS实现随机点名项目的实例代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-04-04
ECMAScript中函数function类型
这篇文章主要介绍了ECMAScript中函数function类型的相关资料,需要的朋友可以参考下
2015-06-06
Javascript 学习书推荐
前一段时间看了一本javascript的书，书名为Javascript DOM 高级程序设计由【加】Jeffrey Sambells和【美】
2009-06-06