php动态添加表格数据,JavaScript_js动态添加表格数据使用insertRow和insertCell实现，效果图: 代码: js动态添加表格 - phpStudy...

js动态添加表格数据使用insertRow和insertCell实现

效果图:

代码:

js动态添加表格数据_2.html

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 = "";

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;

}

}

相关阅读:

深入理解CSS中的UI伪类

window.location不跳转的问题解决方法

android开发教程之ubuntu使用adb连接小米2的步骤和adb调试方法

MySQL中select语句使用order按行排序

linux中vi编辑软件该怎么使用？

C#创建windows系统用户的方法

CSS选择器种类、优先级与匹配原理详解

IE6兼容性问题及IE6常见bug详细汇总

win10系统垃圾文件如何清理?垃圾清理方法介绍

ContentType控制输出的类型是否区分大小写

JQuery 设置checkbox值二次无效的解决方法

Android中应用界面主题Theme使用方法和页面定时跳转应用

深入理解正则表达式语法知识

解决在SQL脚本中的注释引起的奇怪问题