原生javaScript做得动态表格(注释写的很清楚)


Posted in Javascript onDecember 29, 2013

最近看了3本o'reilly的书,我们一般称为禽兽书(跟我一同学的名字很像大笑),然后一直想做一个列子来练练手,因为看公司好多用动态表格的,所以,我就试着用js做了动态表格,用firfox浏览器来调试的,因为firbug插件用着比较好,本来就是想实现一个很小的功能,没想做那么多,就点击按钮能够增加一行就行了,后来越加越多,也越来越好看了。把源码贴出来,大家共同学习,有问题也可以指正出来,js初学者,忘大神笔下留情。

ps:不知道上面为什么不显示行号,好久没用了。 注释写的很清楚,大家共同学习。

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>动态表格</title> 
<style type="text/css"> 
body{ background-color:#9CC; text-align:center} 
table{ margin:10px auto;} 
tr th { border: 1px solid #096;} 
td{border: 1px solid #096;} 
</style> 
<script type="text/javascript"> 
/*在函数的外部只能声明一些变量之类的,不能用操作方法,因为没有函数去调用执行它。*/ //在载入页面的时候就在表格头放入选择框,因为是一次性的 
window.onload = function(){ 
var tab = document.getElementById('tab'); 
var firsttr = document.getElementsByTagName('tr')[0]; 
var childtd = firsttr.childNodes; 
//在第一行第一列上加入选择框 
var inp = document.createElement('input'); 
inp.type = 'checkbox'; 
//DOM Leve 2 事件注册 
catchEvent(inp,'click',function(){ //注册函数 不同状态进行判断 
if(inp.checked ==true){ 
allSelect(); 
}else{ 
cancelSelect(); 
} 
}); 
//catchEvent(inp,'click',allSelect); 
//catchEvent(inp,'change',cancelSelect); 
childtd[0].appendChild(inp); 
} 
//增加一行 
//var count =0;//增加一列用来 计数 
function addRow(){ 
//count++; 
var tab = document.getElementById('tab'); 
var firsttr = document.getElementsByTagName('tr')[0]; 
var childtd = firsttr.childNodes; 
var tr = document.createElement('tr'); 
var arrtd = new Array(); 
var arrinp = new Array(); 
for(var i =0;i<childtd.length;i++){ 
arrtd[i] = document.createElement('td'); 
arrinp[i] = document.createElement('input'); 
if(i==0){ 
arrinp[i].type = 'checkbox'; 
arrinp[i].name = 'selectbox'; 
}else if(i==1){ 
//arrinp[i] = document.createTextNode(count); 
arrinp[i] = document.createTextNode(''); 
} 
arrtd[i].appendChild(arrinp[i]);//思考为什么 input也要加上数组。 
tr.appendChild(arrtd[i]); 
} 
tab.appendChild(tr); 
newSort(); 
} 
//删除操作 
function deleteRow(){ 
var parentTr = new Array();//先把被选中的行放在一个数组上 
var box = document.getElementsByName('selectbox'); 
var tab = document.getElementById('tab'); 
for(var i = 0;i<box.length;i++){ 
if(box[i].checked==true){ 
var parent = box[i].parentNode; 
parentTr[i] = parent.parentNode;//如果直接这种为放在里面为什么不能完全删除??是因为反应不够吗? 
//tab.removeChild(parentTr); 
} 
} 
for(var i = 0;i<parentTr.length;i++){ //这样做才能把选中的全部删除 
if(parentTr[i]){ //这边要先判断一下是否为空值,如果不为空才去移除,否者会报错。 
tab.removeChild(parentTr[i]); 
} 
} 
newSort(); 
} 
//如果执行删除的话则,重新进行排序 
function newSort(){ 
var text = new Array(); 
var child_td = new Array(); 
var arr_tr = document.getElementsByTagName('tr'); 
for(var i = 1;i<arr_tr.length;i++){ 
child_td[i] = arr_tr[i].childNodes[1];//获得从第二行开始所有第二列的节点 
if(child_td[i].childNodes[0]){ 
child_td[i].removeChild(child_td[i].childNodes[0]); 
} 
text[i] = document.createTextNode(i); 
child_td[i].appendChild(text[i]); 
} 
} 
//全选操作 
function allSelect(){ 
var box = document.getElementsByName('selectbox'); 
for(var i= 0;i<box.length;i++){ 
box[i].checked = true; 
} 
} 
//全部取消选择 
function cancelSelect(){ 
var box = document.getElementsByName('selectbox'); 
for(var i = 0;i<box.length;i++){ 
if(box[i].checked == true){ 
box[i].checked =false; 
} 
} 
} 
//事件注册函数 
function catchEvent(eventobj,event,eventHandler){ 
if(eventobj.addEventListener){ 
eventobj.addEventListener(event,eventHandler,false); 
}else if(eventobj.attachEvent){ 
event = 'on'+event; 
eventobj.attachEvent(event,eventHandler); 
} 
} 
//catchEvent(add,'click',addRow); 
</script> 
</head> 
<body> 
<h3>动态表格</h3> 
<input type="button" value="增加" id="add" onclick="addRow()" /> 
<input type="button" value="全部选择" onclick="allSelect()" /> 
<input type="button" value="全部取消" onclick="cancelSelect()" /> 
<input type="button" value="删除" id="delete" onclick="deleteRow()"/> 
<table id="tab" cellpadding="5px" cellspacing="0px"> 
<tr><td></td><td>序号</td><td>题目一</td><td>题目二</td><td>题目三</td></tr> 
</table> 
</body> 
</html></span>
Javascript 相关文章推荐
插件:检测javascript的内存泄漏
Mar 04 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
JS函数重载的解决方案
May 13 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
微信小程序实现锚点跳转
Nov 23 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 #Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 #Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 #Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 #Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 #Javascript
javascript中不等于的代码是什么怎么写
Dec 29 #Javascript
jquery中的on方法使用介绍
Dec 29 #Javascript
You might like
牡丹941资料
2021/03/01 无线电
使用PHP的日期与时间函数技巧
2008/04/24 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
python在命令行下使用google翻译(带语音)
2014/01/16 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python对象属性自动更新操作示例
2018/06/15 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
如何通过python检查文件是否被占用
2020/12/18 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
农民致富事迹材料
2014/01/23 职场文书
环保倡议书格式范文
2014/05/14 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
应聘教师自荐信
2015/03/26 职场文书
心灵捕手观后感
2015/06/02 职场文书
陪护人员误工证明
2015/06/24 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
mysql如何能有效防止删库跑路
2021/10/05 MySQL