js动态添加表格数据使用insertRow和insertCell实现


Posted in Javascript onMay 22, 2014

效果图:
js动态添加表格数据使用insertRow和insertCell实现

代码:

js动态添加表格数据_2.html

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js动态添加表格数据_2 使用insertRow和insertCell方法实现</title> <script type="text/javascript"> 
var mailArr = [ 
{ "title": "一个c#问题", "name": "张三", "date": "2014-03-21" }, 
{ "title": "一个javascript问题", "name": "李四", "date": "2014-03-21" }, 
{ "title": "一个c问题", "name": "五五", "date": "2014-03-21" }, 
{ "title": "一个c++问题", "name": "赵六", "date": "2014-03-21" } 
]; 
var tab = null; 
window.onload = function () { 
loadTab(); 
//全选 
document.getElementById("selA").onclick = function() { 
if (document.getElementById("selA").checked == true) { 
seleAll(tab, true); 
} else { 
seleAll(tab, false); 
} 
}; 
//删除所有的选中的 
document.getElementById("delSel").onclick = function() { 
//遍历所有的input控件即可(除了最后一个全选用的checkbox) 
var chks = document.getElementsByTagName('input'); 
for (var i = chks.length - 2; i >=0; i--) { 
var chk = chks[i]; 
if (chk.checked==true) { 
//选中行删除处理 
var rowNow = chk.parentNode.parentNode; 
rowNow.parentNode.removeChild(rowNow); 
} else { 
alert("really"); 
} 
} 
}; 
}; 
function loadTab() { 
tab = document.getElementById("tb"); 
//把mailArr循环遍历方式以tr的方式加入表格中 
for (var rowindex = 0; rowindex < mailArr.length; rowindex++) { 
//var tr = tab.insertRow(-1);//-1指最后一行 
var tr = tab.insertRow(tab.rows.length - 1);//插入到末二行,最后一行要给全选那一行保留着 
var td1 = tr.insertCell(-1); 
td1.innerHTML = "<input type='checkbox'/>"; 
var td2 = tr.insertCell(-1); 
td2.innerHTML = mailArr[rowindex].title; 
var td3 = tr.insertCell(-1); 
td3.innerHTML = mailArr[rowindex].name; 
var td4 = tr.insertCell(-1); 
td4.innerHTML = mailArr[rowindex].date; 
} 
} 
//要使全选按钮生效,就要遍历所有的表格的行 
function seleAll(mailTab, isSel) { 
for (var i = 0; i < mailTab.rows.length; i++) { 
var tr = mailTab.rows[i]; 
tr.cells[0].childNodes[0].checked = isSel; 
} 
} 
</script> 
</head> 
<body> 
<table id="tb" border="1" style="border-collapse: collapse;"> 
<tr> 
<th>序列</th> 
<th>标题</th> 
<th>发邮人</th> 
<th>发件时间</th> 
</tr> 
<!-- 循环增加 --> 

<!-- 全选 --> 
<tr> 
<td colspan="4"> 
<input id="selA" type="checkbox" /><label for="selA">全选</label> 
<a href="#" id="delSel">删除</a></td> 
</tr> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
javascript 跳转代码集合
Dec 03 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
js去除空格的12种实用方法
Nov 08 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
JS数组转字符串实现方法解析
Sep 04 Javascript
js简单实现交换Li的值
May 22 #Javascript
js操作iframe父子窗体示例
May 22 #Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 #Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 #Javascript
jQuery异步验证用户名是否存在示例代码
May 21 #Javascript
jQuery取id有.的值的方法
May 21 #Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 #Javascript
You might like
php将数据库导出成excel的方法
2010/05/07 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Python base64编码解码实例
2015/06/21 Python
python实现多线程端口扫描
2019/08/31 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
如何理解python面向对象编程
2020/06/01 Python
python如何将图片转换素描画
2020/09/08 Python
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
中科前程Java笔试题
2016/11/20 面试题
告诉你怎样写创业计划书
2014/01/27 职场文书
职业生涯规划书范文
2014/03/10 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript