table insertRow、deleteRow定义和用法总结


Posted in Javascript onMay 14, 2014

表格有几行: var trCnt = table.rows.length; (table为Id )

每行有几列:for (var i=0; i<trCnt; i++)
table.rows[i].cells.length;

javascript操作table:

insertRow(),deleteRow(),insertCell(),deleteCell()方法

table.insertRow()在IE下没问题 但在firefox下就得改为table.insertRow(-1)
同样其相应的insertCell()也要改为insertCell(-1)

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 相关文章推荐
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
JS求平均值的小例子
Nov 29 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
微信小程序保持session会话的方法
Mar 20 Javascript
Nest.js散列与加密实例详解
Feb 24 Javascript
jQuery 中国省市两级联动选择附图
May 14 #Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 #Javascript
js实现图片拖动改变顺序附图
May 13 #Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 #Javascript
js加密解密字符串可自定义密码因子
May 13 #Javascript
JavaScript用Number方法实现string转int
May 13 #Javascript
javascript中expression的用法整理
May 13 #Javascript
You might like
PHP中常用数组处理方法实例分析
2008/08/30 PHP
PHP无限分类(树形类)
2013/09/28 PHP
php输入流php://input使用浅析
2014/09/02 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
Python的词法分析与语法分析
2013/05/18 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
Python过滤序列元素的方法
2020/07/31 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
公司会议开幕词
2015/01/29 职场文书
小学班主任个人总结
2015/03/03 职场文书
化工生产实习心得体会
2016/01/22 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
python 模块重载的五种方法
2021/04/24 Python
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis