javascript 可以全选反选删除的表格(比较全面的操作了表格)
<!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>
<title>可以全选反选删除的表格</title>
<style type="text/css">
body,table
{
margin:0;
padding:0;
font-size:14px;
}
table,tr,th,td
{
border:1px solid #cdc;
}
th
{
background-color:green;
width:100px;
}
.oddColor
{
background-color:#ccc;
}
.evenColor
{
background-color:#fcf;
}
.overColor
{
background-color:#dff;
}
</style>
<script type="text/javascript">
//定义嵌套数组
var datas = [["张三", 30, "南昌"], ["李四", 25, "北京"], ["王五", 20, "郑州"],
["赵六", 19, "武汉"], ["李莫", 18, "深圳"], ["罗成", 33, "重庆"],
["王平", 31, "天津"], ["刘萍", 22, "上海"], ["杨丽", 17, "石家庄"],
["郭丽", 30, "广州"]];
//动态创建表格
function CreateMyTable() {
var tblMain = document.getElementById("tblMain");
var rowsCount = tblMain.rows.length;
var addRow;
var addCol;
var detailInfos;
for (var i = 0; i < datas.length; i++) {
addRow = tblMain.insertRow(rowsCount - 1);//控制数据行添加到倒数第二列
addCol = addRow.insertCell(-1);
addCol.innerHTML = "<input type='checkbox' name='item' />";
addCol.align = "center"; //控制列居中
detailInfos = datas[i];
for (var j = 0; j < detailInfos.length; j++) {
addCol = addRow.insertCell(-1);
addCol.innerHTML = detailInfos[j];
}
addCol = addRow.insertCell(-1);
addCol.innerHTML = "<input type='button' id='btnDel" + i + "' value='删除' onclick='btnDel(this)' />";
addCol.align = "center"; //控制列居中
rowsCount++;
}
TableColor();
}
//设置网格间隔色和高亮显示
var oldClassName; //记住行的背景色
function TableColor() {
var tblMain = document.getElementById("tblMain");
var rowNodes = tblMain.rows;
for (var i = 1; i < rowNodes.length-1; i++) { //除去首行和末行
if (i % 2 == 0) {
rowNodes[i].className = "evenColor";
}
else {
rowNodes[i].className = "oddColor";
}
rowNodes[i].onmouseover = function () {
oldClassName = this.className;
this.className = "overColor";
}
rowNodes[i].onmouseout = function () {
this.className = oldClassName;
}
}
}
//复选框全选函数
function checkAll() {
var currentCheckNode = event.srcElement;
var checkAllNodes = document.getElementsByName("all");
//把没有点击的全选复选框去除复选
for (var i = 0; i < checkAllNodes.length; i++) {
if (currentCheckNode != checkAllNodes[i]) {
checkAllNodes[i].checked = false;
}
}
var checkItemNodes = document.getElementsByName("item
补充：web前端 , JavaScript ,
