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 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
Require.js的基本用法详解
Jul 03 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
PHP 开发工具
2006/12/06 PHP
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
python中pass语句用法实例分析
2015/04/30 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
英国假发网站:Hothair
2018/02/23 全球购物
30年同学聚会感言
2014/01/30 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
Python机器学习之KNN近邻算法
2021/05/14 Python
Python函数中apply、map、applymap的区别
2021/11/27 Python
GPU服务器的多用户配置方法
2022/07/07 Servers