原生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 相关文章推荐
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 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
php FPDF类库应用实现代码
2009/03/20 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
Python程序设计入门(2)变量类型简介
2014/06/16 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
Python基于WordCloud制作词云图
2019/11/29 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
Python Selenium库的基本使用教程
2021/01/04 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
毕业生多媒体设计求职信
2013/10/12 职场文书
大二学期个人自我评价
2014/01/13 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
售后服务承诺书范文
2014/03/26 职场文书
护士2014年终工作总结
2014/11/11 职场文书