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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
javascript编程起步(第七课)
Feb 27 Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
javascript date格式化示例
Sep 25 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
js实现消息滚动效果
Jan 18 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
vue实现计算器功能
Feb 22 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
js面向对象编程总结
2017/02/16 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
js判断密码强度的方法
2020/03/18 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
python在非root权限下的安装方法
2018/01/23 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
提高python代码运行效率的一些建议
2020/09/29 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
优秀毕业自我鉴定
2014/02/15 职场文书
保险专业自荐信范文
2014/02/20 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
促销活动总结模板
2014/07/01 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏