原生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 相关文章推荐
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
浅谈js的异步执行
Oct 18 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
elementUI多选框反选的实现代码
Apr 03 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
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
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
禁止刷新,回退的JS
2006/11/25 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
python实现获取Ip归属地等信息
2016/08/27 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
使用python制作一个解压缩软件
2019/11/13 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
酒店办公室文员岗位职责
2013/12/18 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
信访工作个人总结
2015/03/03 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
聘任合同书
2015/09/21 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
Redis实现订单过期删除的方法步骤
2022/06/05 Redis
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL