<!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,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' />"; 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' value='删除' />"; 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"); for (var i = 0; i < checkItemNodes.length; i++) { checkItemNodes[i].checked = currentCheckNode.checked; } } //按钮选择函数 function btnCheckboxSel(index) { var checkItemNodes = document.getElementsByName("item"); for (var i = 0; i < checkItemNodes.length; i++) { if (index == 2) { checkItemNodes[i].checked = !checkItemNodes[i].checked; } else { checkItemNodes[i].checked = index; } } } //每行的删除按钮函数 function btnDel(btn) { var tblMain = document.getElementById("tblMain"); var delRowNode = btn.parentNode.parentNode; var sMsg = "您是否要删除 姓名为:【" + delRowNode.cells[1].innerText + "】,年龄为:【" + delRowNode.cells[2].innerText + "】,城市为:【" + delRowNode.cells[3].innerText + "】 的数据?"; if (window.confirm(sMsg)) { tblMain.tBodies[0].removeChild(delRowNode); TableColor(); } } //删除所选项按钮函数 function btnDelSelectRow() { var arrDel = new Array(); var pos = 0; var itemNodes = document.getElementsByName("item"); for (var i = 0; i < itemNodes.length; i++) { if (itemNodes[i].checked) { arrDel[pos] = itemNodes[i].parentNode.parentNode; pos++; } } if (pos <= 0) { return; } if (!window.confirm("是否要删除选择的数据?")) return; var tblMain = document.getElementById("tblMain"); for (var i = 0; i < arrDel.length; i++) { tblMain.tBodies[0].removeChild(arrDel[i]); } } window.onload = CreateMyTable; </script> </head> <body> <table cellspacing="0" cellpadding="10px"> <tbody> <tr> <th><input type="checkbox" />全选</th> <th>姓名</th> <th>年龄</th> <th>城市</th> <th>操作</th> </tr> <tr> <th><input type="checkbox" />全选</th> <th colspan="4"> <input type="button" value="全选" /> <input type="button" value="全清" /> <input type="button" value="反选" /> <input type="button" value="删除所选项" /> </th> </tr> </tbody> </table> </body> </html>
javascript实现可全选、反选及删除表格的方法
内容版权声明：除非注明，否则皆为本站原创文章。