- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- th,td{ text-align: center; border: 1px solid; } table{ border: 1px solid;
- margin: auto; width: 500px; } div{ text-align: center; } .out{ background-color:
- white; } .over{ background-color: pink; }
- </style>
- </head>
- <body>
- <table>
- <caption>
- 学生信息表
- </caption>
- <tr>
- <td>
- <input type="checkbox" name="cb" id="firstCb">
- </td>
- <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="delTr(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="delTr(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="delTr(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>
- <script>
- function delTr(obj) {
- var parentNode = obj.parentNode.parentNode.parentNode;
- var parentNode1 = obj.parentNode.parentNode;
- parentNode.removeChild(parentNode1);
- }
- //1. 设置页面加载完成后绑定事件
- Windows.onload = function() {
- //2. 给全选绑定单击事件
- document.getElementById("selectAll").onclick = function() {
- var cbs = document.getElementsByName("cb");
- for (var i = 0; i < cbs.length; i++) {
- cbs[i].checked = true;
- }
- }
- //3. 给全不选绑定单击事件
- document.getElementById("unSelectAll").onclick = function() {
- var cbs = document.getElementsByName("cb");
- for (var i = 0; i < cbs.length; i++) {
- cbs[i].checked = false;
- }
- }
- //4. 给反选绑定单击事件
- document.getElementById("selectRev").onclick = function() {
- var cbs = document.getElementsByName("cb");
- for (var i = 0; i < cbs.length; i++) {
- cbs[i].checked = !cbs[i].checked;
- }
- }
- //5.
- document.getElementById("firstCb").onclick = function() {
- var cbs = document.getElementsByName("cb");
- var flag = cbs[0].checked;
- for (var i = 0; i < cbs.length; i++) {
- cbs[i].checked = flag;
- }
- /*
- var cbs = document.getElementsByName("cb");
- for (var i = 0; i < cbs.length; i++) {
- cbs[i].checked = this.checked;
- */
- }
- //6. 给所有 tr 绑定鼠标移到元素之上与移出元素事件
- var trs = document.getElementsByTagName("tr");
- for (var i = 0; i < trs.length; i++) {
- // 移到元素之上
- trs[i].onmouseover = function() {
- this.className = "over";
- }
- // 移出元素
- trs[i].onmouseout = function() {
- this.className = "out";
- }
- }
- }
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3350211.html