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 混淆加密收藏
Jan 16 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 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
延长phpmyadmin登录时间的方法
2011/02/06 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
广告业务员岗位职责
2014/02/06 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
如何用JS实现简单的数据监听
2021/05/06 Javascript
用Python将GIF动图分解成多张静态图片
2021/06/11 Python