javascript实现可全选、反选及删除表格的方法

时间：2021-05-26

本文实例讲述了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><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' 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"); 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 id="tblMain" cellspacing="0" cellpadding="10px" align="center"> <tbody> <tr> <th><input type="checkbox" name="all" onclick="checkAll()" />全选</th> <th>姓名</th> <th>年龄</th> <th>城市</th> <th>操作</th> </tr> <tr> <th><input type="checkbox" name="all" onclick="checkAll()" />全选</th> <th colspan="4"> <input type="button" value="全选" onclick="btnCheckboxSel(1)" /> <input type="button" value="全清" onclick="btnCheckboxSel(0)" /> <input type="button" value="反选" onclick="btnCheckboxSel(2)" /> <input type="button" value="删除所选项" onclick="btnDelSelectRow()" /> </th> </tr> </tbody> </table></body></html>

希望本文所述对大家的javascript程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章