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


Posted in Javascript onDecember 16, 2013

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>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()"
value="Insert new row">
</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>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="delRow()"
value="Delete first row">
</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>
<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="delCell()" value="Delete cell">
</body>
</html>

项目中的应用:
<script type="text/javascript">
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>
Javascript 相关文章推荐
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
Js注册协议倒计时的小例子
Jun 24 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
vue之a-table中实现清空选中的数据
Nov 07 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
利用js动态添加删除table行的示例代码
Dec 16 #Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 #Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 #Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 #Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 #Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 #Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 #Javascript
You might like
ini_set的用法介绍
2014/01/07 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
ES6的新特性概览
2016/03/10 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
举例讲解Python中的算数运算符的用法
2015/05/13 Python
python装饰器与递归算法详解
2016/02/18 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
python 安装impala包步骤
2020/03/28 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
县优秀教师事迹材料
2014/01/31 职场文书
创业大赛策划书
2014/03/01 职场文书
拔河比赛口号
2014/06/10 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
年终工作总结范文2014
2014/11/27 职场文书
新店开张宣传语
2015/07/13 职场文书
python实现简单的名片管理系统
2021/04/26 Python
Python机器学习之PCA降维算法详解
2021/05/19 Python
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB