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

2019-11-20 12:28:09

字体：大中小

来源：转载

供稿：网友

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

上一篇：javascript实现表格增删改操作实例详解

下一篇：javascript实现点击商品列表checkbox实时统计金额的方法