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 相关文章推荐
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
JavaScript实现留言板案例
Mar 17 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利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
js正则相关知识点专题
2018/05/10 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
python动态性强类型用法实例
2015/05/09 Python
python reduce 函数使用详解
2017/12/05 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
Python装饰器语法糖
2019/01/02 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
Python实现图像的垂直投影示例
2020/01/17 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
Django之腾讯云短信的实现
2020/06/12 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
联想台湾官网:Lenovo TW
2018/05/09 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
2014年安全生产大检查方案
2014/05/13 职场文书
给学校的建议书400字
2015/09/14 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS