首頁 > 開發者 > 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"); 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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
