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

本文实例讲述了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程序设计有所帮助。