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 相关文章推荐
JS location几个方法小姐
Jul 09 Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
node.js实现端口转发
Apr 14 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
JS实现网页时钟特效
Mar 25 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 Javascript
Html5生成验证码的示例代码
May 10 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的基本常识小结
2013/07/05 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
Python程序员开发中常犯的10个错误
2014/07/07 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
python简单实现获取当前时间
2016/08/27 Python
详解Python中类的定义与使用
2017/04/11 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
Python 互换字典的键值对实例
2019/02/12 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
python做接口测试的必要性
2019/11/20 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
浅析python函数式编程
2020/09/26 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
市场营销专业求职信
2014/06/17 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
赤壁观后感(2)
2015/06/15 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB
配置Kubernetes外网访问集群
2022/03/31 Servers
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python