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 相关文章推荐
accesskey 提交
Jun 26 Javascript
javascript编程起步(第三课)
Feb 27 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
Node.js学习入门
Jan 03 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
利用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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
基于empty函数的输出详解
2013/06/17 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
python实现的文件夹清理程序分享
2014/11/22 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
Python如何实现文本转语音
2016/08/08 Python
python实现TF-IDF算法解析
2018/01/02 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
浅谈Python中的bs4基础
2018/10/21 Python
python软件都是免费的吗
2020/06/18 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
Aosom西班牙:家具在线商店
2020/06/11 全球购物
大学本科生职业生涯规划书范文
2014/09/14 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
入党后的感想
2015/08/10 职场文书
Python类方法总结讲解
2021/07/26 Python
MySQL 如何限制一张表的记录数
2021/09/14 MySQL