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