原生javaScript做得动态表格(注释写的很清楚)
最近看了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上下方向键控制表格行选中并高亮显示的方法.分享给大家供大家参考.具体实现方法如下: <style> tr.highlight { background:#08246B; color:white; } </style> <table border="1" width="70%" id="ice"> <tr onClick="selectTR();return fa
-
原生javascript实现简单的datagrid数据表格
简单的datagrid 1.排序 自定义排序方式 2.编辑 3.拖拽 4.分页 5.单选 多选(ctrl) 线性选(shift) 6.文字render 就是给文字着色 比如 大于0红色 小于0绿色 7.对列的显示隐藏 8.分组 只是一个示例 没有什么与后台的借口 其实可以写几个回调就行了 里面有loading条 可以在没返回结果前一直显示 复制代码 代码如下: <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/x
-
javascript 动态创建表格
复制代码 代码如下: <html> <head> <script> function createTable(rows,lines){ this.rows=rows; this.lines=lines; var Body=document.getElementById('body'
-
javascript动态向网页中添加表格实现代码
//此段代码在IE9.Firefox.Chorme.safair中测试显示没有问题,给该表格添加了一些简单的样式,基本功能可以实现,还有少量问题有待改进! 效果图如下: 以下是代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <
-
javascript实现的使用方向键控制光标在table单元格中切换
效果截图: html 代码: 复制代码 代码如下: <!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> <titl
-
按键盘方向键翻页跳转的javascript代码(支持ie,firefox)
网上提供的代码,多是仅支持ie,下面这个是我们特别为大家整理的兼容firefox版本的. 支持按键盘方向键翻页跳转的代码支持ie,firefox document.onkeydown = pageEvent; var prevpage="http://www.jb51.net/softs"; var nextpage="http://www.jb51.net/codes"; function pageEvent(evt){ evt = evt ||window.ev
-
javascript 表格内容排序 简单操作示例代码
复制代码 代码如下: <div id="html"></div> <script> var listInfos = new Array(); listInfos[0] = new Array(); listInfos[0][0] = {'name':'推荐页1','DayCount':666,'AvgTime':29872,'ErrCount':180663,'ErrorRate':'2873%','DaySystemErrorCount':0,'D
-
原生javaScript做得动态表格(注释写的很清楚)
最近看了3本o'reilly的书,我们一般称为禽兽书(跟我一同学的名字很像大笑),然后一直想做一个列子来练练手,因为看公司好多用动态表格的,所以,我就试着用js做了动态表格,用firfox浏览器来调试的,因为firbug插件用着比较好,本来就是想实现一个很小的功能,没想做那么多,就点击按钮能够增加一行就行了,后来越加越多,也越来越好看了.把源码贴出来,大家共同学习,有问题也可以指正出来,js初学者,忘大神笔下留情. ps:不知道上面为什么不显示行号,好久没用了. 注释写的很清楚,大家共同学习.
-
JavaScript实现简单动态表格
本文实例为大家分享了JavaScript实现简单动态表格的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> table{ border: 1px solid; margin: auto; width: 500p
-
JavaScript实现生成动态表格和动态效果的方法详解
今天上午完成了Vue实现一个表格的动态样式,那么JavaScript代码能不能实现同样的效果呢?这样也可以学习一下JavaScript的语法,晚上试了一下,完全可以,效果一模一样. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="text/html; charset=utf-8">
-
原生Javascript和jQuery做轮播图简单例子
接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较. jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮
-
原生JS和JQuery动态添加、删除表格行的方法
本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
-
java前端javascript生成动态表格示例演示
目录 前言 案例分析 代码 动图演示 结语 前言 动态生成表格是前端开发中非常重要的内容,常常是后端返回数据(大多是json类型),我们前端通过js循环来动态添加,所以这部分内容是十分重要的,今天我就来写写这部分内容,其实也很简单的,仔细看哦!!! 案例分析 因为里面的学生数据都是动态的,我们需要 js 动态生成.这里我们模拟数据,自己定义好数据.数据我们采取对象形式存储.所有的数据都是放到 tbody 里面的行里面.因为行很多,我们需要循环创建多个行(对应多少人). 代码 <!DOCTYPE
-
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做任何选择时: 选择时: 代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三级联动测试</titl
-
原生JavaScript写出Tabs标签页的实例代码
最近在重新学习JavaScript,手写了一个tabs标签页. 话不多说,直接开始. 首先,是前端页面. 图1 tabs 先来把tabs分解一下: 图2 tabs分解 首先,一个大的框div,上面红色的框是导航栏nav,导航栏里是一个无序列表ul,里面三个li标签(黄色的框),li标签里两个绿色标签是两个span,一个用来放导航的名字,一个用来放导航关闭的icon,右边是一个button,用来添加新的导航栏及内容:下方是导航栏的内容section. 导航tabs.html代码如下: <!DOCT
-
JavaScript实现网页动态生成表格
JavaScript(JS)网页–动态生成表格,供大家参考,具体内容如下 在网页中,动态生成列表的内容,将数组中的object加入到列表中(没学到数据库).在HTML中创建thead,然后通过JavaScipt动态生成tbody.并且在每行最后申城一个单元格,加入删除操作,点击删除可以删除此行. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"&
-
JavaScript实现动态表格效果
本文实例为大家分享了JavaScript实现动态表格效果的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> .bigDiv{ width: 600px; margin: 50px auto; } table{