您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
javascript实现可全选、反选及删除表格的方法
作者：佚名 责任编辑：admin 更新时间：2022-06-22
本文实例讲述了javascript实现可全选、反选及删除表格的方法。分享给大家供大家参考。具体实现方法如下：
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 <!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.- 上一个程序编程： javascript实现点击商品列表checkbox实时统计金额的方法
- 下一个程序编程： javascript实现表格增删改操作实例详解
