利用JS来进行表格的选择删除等功能
二、代码1.表格的制作以及事件的绑定2.全选按钮的功能实现3.全不选按钮的功能实现4.反选按钮的功能实现5.删除按钮的功能实现6.鼠标悬停时颜色的变化7.运行结果图总结二、代码
1.表格的制作以及事件的绑定
代码如下（示例）：
<body><table><caption>学生信息表</caption><tr><th><input type="checkbox" name="cb" id="firstcb"></th><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td><input type="checkbox" name="cb"></td><td>1</td><td>令狐冲</td><td>男</td><td><a href="javascript:void(0);" onclick="miss(this)">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0);" onclick="miss(this)">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>3</td><td>岳不群</td><td>?</td><td><a href="javascript:void(0);" onclick="miss(this)">删除</a></td></tr></table><div><input type="button" id="selectAll" value="全选"><input type="button" id="unSelectAll" value="全不选"><input type="button" id="selectRev" value="反选"></div></body>
2.全选按钮的功能实现
代码如下（示例）：
<script>window.onload = function(){document.getElementById("selectAll").onclick = function(){var cbs = document.getElementsByName("cb");for (var i = 0; i < cbs.length; i++) {cbs[i].checked = true;}}</script>
3.全不选按钮的功能实现
代码如下（示例）：
<script>document.getElementById("unSelectAll").onclick = function(){var cbs = document.getElementsByName("cb");for (var i = 0; i < cbs.length; i++) {cbs[i].checked = false;}}</script>
4.反选按钮的功能实现
代码如下（示例）：
<script>document.getElementById("selectRev").onclick = function(){var cbs = document.getElementsByName("cb");for (var i = 1; i < cbs.length; i++) {cbs[i].checked = !cbs[i].checked}}</script>
5.删除按钮的功能实现
代码如下（示例）：
<script>function miss(n) {n.parentNode.parentNode.remove();}</script>
6.鼠标悬停时颜色的变化
代码如下（示例）：
<style>table{border: 1px solid;width: 500px;margin-left: 30%;}td,th{text-align: center;border: 1px solid;}div{margin-top: 10px;margin-left: 30%;}/*.over{background-color: pink;}.out{background-color: white;}*/tr:hover{background-color: pink;}a:link{color: red;}a:visited{color: blue;}a:hover{color: green;}a:active{color: yellow;}</style>.....<script>document.getElementById("firstcb").onclick = function(){var cbs = document.getElementsByName("cb");var firstcb = document.getElementById("firstcb");for (var i = 0; i < cbs.length; i++) {cbs[i].checked = firstcb.checked;}}</script>
7.运行结果图
总结
以上就是利用JS来实现表格的全选、全不选、反选以及删除的内容，主要利用了绑定事件之后的调用、循环等方面的技术来实现功能。
