jQuery作的可編輯表格

時間 2019-12-09

標籤 jquery 編輯表格欄目 JQuery 简体版

原文原文鏈接

jQuery作的可編輯表格

HTML代碼：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <link rel="stylesheet" type="text/css" href="test_3.css"/>
 7     </head>
 8     <body>
 9         <table>
10             <tr>
11                 <th><input type="button" value="+" class="addColumn"/><input type="button" value="-" class="removeColumn"/></th>
12                 <th><input type="button" value="+" class="addColumn"/><input type="button" value="-" class="removeColumn"/></th>
13                 <th><input type="button" value="+" class="addColumn"/><input type="button" value="-" class="removeColumn"/></th>
14                 <th><input type="button" value="+" class="addColumn"/><input type="button" value="-" class="removeColumn"/></th>
15                 
16             </tr>
17             <tr>
18                 <th></th>
19                 <th></th>
20                 <th></th>
21                 <th></th>
22                 <td><input type="button" value="+" class="addLine"/><input type="button" value="-" class="removeLine"/></td>
23             </tr>
24             <tr>
25                 <td></td>
26                 <td></td>
27                 <td></td>
28                 <td></td>
29                 <td><input type="button" value="+" class="addLine"/><input type="button" value="-" class="removeLine"/></td>
30             
31             </tr>
32             <tr>
33                 <td></td>
34                 <td></td>
35                 <td></td>
36                 <td></td>
37                 <td><input type="button" value="+" class="addLine"/><input type="button" value="-" class="removeLine"/></td>
38                 
39             </tr>
40         </table>
41         <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
42         <script src="test_3.js" type="text/javascript" charset="utf-8"></script>
43     </body>
44 </html>

css樣式表：

  1 table{
  2                 border-collapse: collapse;
  3             }
  4             td,th{
  5                 border: solid 1px #ccc;
  6                 width: 100px;
  7                 min-width: 100px;
  8                 height: 30px;
  9                 outline: none;
 10                 font-size: 14px;
 11                 text-align: center;
 12                 
 13             }
 14             tr td:last-child{
 15                 border: none;
 16                 text-align: center;
 17                 width: 100px;
 18             }
 19             .addLine{
 20             width: 24px;
 21             height: 24px;
 22             border-radius: 12px;
 23             background-color: mediumseagreen;
 24             color: #fff;
 25             border: none;
 26             font-size: 18px;
 27             line-height: 24px;
 28             margin-left: -20px;
 29             text-align: center;
 30             font-weight: bold;
 31             cursor: pointer;
 32             outline: none;    
 33             }
 34             .addLine:hover{
 35                 background-color: blueviolet;
 36             }
 37             th{
 38                 position: relative;
 39             }
 40             .addColumn{
 41             width: 24px;
 42             height: 24px;
 43             border-radius: 12px;
 44             background-color: mediumseagreen;
 45             color: #fff;
 46             border: none;
 47             font-size: 18px;
 48             line-height: 24px;
 49             margin-left: 10px;
 50             text-align: center;
 51             font-weight: bold;
 52             cursor: pointer;
 53             outline: none;    
 54             position: absolute;
 55             right: -12px;
 56             top: 0px;
 57             }
 58             .addColumn:hover{
 59                 background-color: blueviolet;
 60             }
 61             .removeLine{
 62             width: 24px;
 63             height: 24px;
 64             border-radius: 12px;
 65             background-color: crimson;
 66             color: #fff;
 67             border: none;
 68             font-size: 18px;
 69             line-height: 24px;
 70             margin-left: 10px;
 71             text-align: center;
 72             font-weight: bold;
 73             cursor: pointer;
 74             outline: none;
 75             }
 76             .removeLine:hover{
 77                 background-color: deepskyblue;
 78             }
 79             
 80             .removeColumn{
 81             width: 24px;
 82             height: 24px;
 83             border-radius: 12px;
 84             background-color: crimson;
 85             color: #fff;
 86             border: none;
 87             font-size: 18px;
 88             line-height: 24px;
 89             text-align: center;
 90             font-weight: bold;
 91             cursor: pointer;
 92             outline: none;    
 93             position: absolute;
 94             right: 60px;
 95             top: 0px;
 96             }
 97             .removeColumn:hover{
 98                 background-color: deepskyblue;
 99             }
100             table{
101                 margin-top: 50px;
102             }
103             tr:first-child th{
104                 border: none;
105             }

最重要的jQuery代碼！！！：

  1 $(function() {
  2     function bindEditEvent() {
  3         //添加完一行後解除全部事件 unbind()接觸事件
  4         $("td:not('td:last-child'),tr:gt(0) th").unbind("dblclick");
  5         $("td:not('td:last-child'),tr:gt(0) th").unbind("blur");
  6         $("td:not('td:last-child'),tr:gt(0) th").unbind("keydown");
  7         //雙擊單元格變爲可編輯狀態
  8         $("td:not('td:last-child'),tr:gt(0) th").dblclick(function() {
  9             //設置可編輯屬性
 10             $(this).attr("contenteditable", true);
 11             //設置變成可編輯的背景色
 12             $(this).css({"background-color": "palegreen"});
 13             //得到焦點
 14             $(this).focus();
 15         });
 16         //失去焦點時，結束編輯
 17         $("td:not('td:last-child'),tr:gt(0) th").blur(function() {
 18             //移除可編輯屬性
 19             $(this).removeAttr("contenteditable");
 20             $(this).css({"background-color": "#fff"});
 21         });
 22         //設置若是按下回車鍵，結束編輯
 23         $("td:not('td:last-child'),tr:gt(0) th").keydown(function(e) {
 24             //keyCode得到按鍵的編碼 ，13是時車鍵
 25             if(e.keyCode == 13) {
 26                 //移除可編輯屬性
 27                 $(this).removeAttr("contenteditable");
 28                 $(this).css({"background-color": "#fff"});
 29             }
 30         });
 31     }
 32     //添加行
 33     function bindAddLine() {
 34         $(".addLine").click(function() {
 35             //獲取每行的列數
 36             var num = $("tr:eq(0) th").length;
 37             var temp = "<tr>";
 38             for(var i = 0; i <= num; i++) {
 39                 if(i != num) {
 40                     temp += "<td></td>";
 41                 } else {
 42                     temp += "<td><input type='button' value='+' class='addLine' /><input type='button' value='-' class='removeLine'/></td>"
 43                 }
 44             }
 45             temp += "</tr>"
 46             //after(),在tr後添加一行新的tr和按鈕
 47             $(this).parents("tr").after(temp);
 48             //必須先解除全部添加行按鈕的事件綁定
 49             $(".addLine").unbind("click");
 50             //在爲全部的添加行按鈕綁定事件
 51             bindAddLine();
 52             bindEditEvent();
 53             bindDeleteLine();
 54         });
 55     }
 56     //添加列
 57     function bindAddColumn() {
 58         $(".addColumn").click(function() {
 59             //先找到父元素Th
 60             var th = $(this).parent();
 61             //得到點擊第幾個添加列的按鈕
 62             var index = $("tr:eq(0) th").index(th);
 63             //得到第0個以後的tr
 64             var tr = $("tr:gt(0)");
 65             for(var one of tr) {
 66                 //迭代jQuery對象時 取出的是js，須要用$()轉換
 67                 if($(one).find("th").length > 0) {
 68                     $(one).find("th").eq(index).after("<th></th>");
 69                 } else {
 70                     $(one).find("td").eq(index).after("<td></td>");
 71                 }
 72             }
 73             $("tr:eq(0) th").eq(index).after("<th><input type='button' value='+' class='addColumn'/><input type='button' value='-' class='removeColumn'/></th>");
 74             bindEditEvent();
 75             $(".addColumn").unbind("click");
 76             bindAddColumn();
 77             bindDeleteColumn();
 78         });
 79     }
 80     //刪除行
 81     function bindDeleteLine(){
 82         $(".removeLine").click(function(){
 83             var num=$("table tr").length;
 84             if(num<=2){
 85                 confirm("最後一行啦，不能再刪了");
 86             }else{
 87                 $(this).parents("tr").remove();
 88             }
 89             
 90 
 91         });
 92     }
 93     //刪除列
 94     
 95     function bindDeleteColumn(){
 96         $(".removeColumn").click(function(){
 97             //先找到父元素Th
 98             $(".removeColumn").unbind("click");
 99             var th = $(this).parent();
100             //得到點擊第幾個添加列的按鈕
101             var index = $("tr:eq(0) th").index(th);
102             //得到第0個以後的tr
103             var tr = $("tr:gt(0)");
104             var num=$("table th").length;
105             if(num<=2){
106                 confirm("最後一列啦，不能再刪了");
107             }else{
108                 for(var one of tr) {
109                 //迭代jQuery對象時 取出的是js，須要用$()轉換
110                 if($(one).find("th").length > 0) {
111                     $(one).find("th").eq(index).remove();
112                 } else {
113                     $(one).find("td").eq(index).remove();
114                 }
115             }
116             $("tr:eq(0) th").eq(index).remove();
117             }
118             
119             bindDeleteColumn();
120         });
121     }
122     bindEditEvent();
123     bindAddLine();
124     bindAddColumn();
125     bindDeleteLine();
126     bindDeleteColumn();
127 });

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。