本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
