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

http://www.jb51.net/article/44476.htm

本篇文章主要介绍了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" οnclick="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='删除' οnclick='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>

javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)相关推荐

javascript中的字符串编码、字符串方法详解
js中的字符串是一种类数组,采用UTF-16编码的Unicode字符集,意味字符串的每个字符可用下标方式获取,而每个字符串在内存中都是一个16位值组成的序列.js对字符串的各项操作均是在对16位值进行 ...
怎么利用迭代器写入mysql_流迭代器实现文件操作（读取和写入）方法详解
流迭代器并不知道底层流的特性.当然,它们只适用于文本模式,否则它们不会关心数据是什么.流迭代器可以以文本模式来读写任何类型的流.这意味着除了其他的一些流之外,我们可以用迭代器以文本模式来读和写文件.在 ...
JavaScript：添加与删除数组的方法详解
文章目录添加删除数组元素的方法添加删除数组元素的方法 <script>// 添加删除数组元素的方法// 1.push()在我们数组的末尾添加一个或者多个数组元素var arr = [ ...
javascript写css样式,原生javascript实现读写CSS样式的方法详解
原生javascript实现读写CSS样式的方法详解发布于 2017-05-24 15:05:31 | 120 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Jav ...
js 操作table: insertRow()，deleteRow()，insertCell()，deleteCell()方法
表格有几行: var trCnt = table.rows.length; (table为Id ) 每行有几列:for (var i=0; i<trCnt; i++) ...
js 操作table: insertRow()，deleteRow()，insertCell()，deleteCell()方法
表格有几行: var trCnt = table.rows.length; (table为Id ) 每行有几列:for (var i=0; i<trCnt; i++) ...
Javascript操作table,tr,td和表格CSS样式设置小常识
效果良好的表属性设置: <table cellSpacing="0" cellPadding="0" border='1' bordercolor=&qu ...
利用html制作隔行变色表格,javascript实现table表格隔行变色的方法
本文实例讲述了javascript实现table表格隔行变色的方法.分享给大家供大家参考.具体实现方法如下: table间隔色 function SetTableColor() { var tbl = ...
bootstrap table php,Bootstrap Table使用方法详解
bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件.而bootstrap是来自 Twitter,是目前 ...

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

javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)相关推荐

最新文章

热门文章