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 });