表格的增删改
简要来说，就是做成图下，可以增删改，然而木有验证啥的。
复制代码，到浏览器打开，就可查看。。。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <!-- <script src="jquery-1.11.1.js"> </script> --> 6 <script src="http://code.jquery.com/jquery-latest.js"></script> 7 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /> 8 <!-- <link rel="stylesheet" href="bootstrap.css"/> --> 9 <title>Document</title> 10 <script> 11 function changeColor(){ 12 $("tr:not(:first):not(:last):even").css({background: "#efefef"}); 13 $("tr:not(:first):not(:last):odd").css({background: "#fff"}); 14 } 15 function buttonColor(){ 16 $("input[type='button']").addClass("btn btn-xs "); 17 $("input[value='修改']").addClass("btn-success "); 18 $("input[value='删除']").addClass("btn-danger "); 19 $("input[value='增加']").addClass("btn-info "); 20 } 21 22 function initial(){ 23 changeColor(); 24 //增加按钮事件 25 $("input[value='增加']").click( 26 function(){ 27 var bName=$("#book").val(); 28 var bPrice=$("#price").val(); 29 var bStorage=$("#storage").val(); 30 31 //增加tr和td 32 var $td1=$("<td>"+bName+"</td>"); 33 var $td2=$("<td>"+bPrice+"</td>"); 34 var $td3=$("<td>"+bStorage+"</td>"); 35 var $td4=$("<td></td>"); 36 37 var $update=$($("input[value='修改']").get(0)).clone(true); 38 var $delete=$($("input[value='删除']").get(0)).clone(true); 39 $td4.append($update); 40 $td4.append(" "); 41 $td4.append($delete); 42 43 var $tr=$("<tr></tr>"); 44 //将td添加到tr中 45 $tr.append($td1); 46 $tr.append($td2); 47 $tr.append($td3); 48 $tr.append($td4); 49 //将tr添加到最后一行 50 $("tr:last").before($tr); 51 $("#book").val(''); 52 $("#price").val(''); 53 $("#storage").val(''); 54 changeColor(); 55 } 56 ); 57 //删除按钮事件 58 $("input[value='删除']").click( 59 function(e){ 60 $(this).parent().parent().remove(); 61 changeColor(); 62 } 63 64 ); 65 66 //修改按钮事件 67 $("input[value='修改']").click( 68 function(){ 69 if($(this).val()=="修改"){ 70 $(this).val("确定"); 71 var tds= $(this).parent().siblings(); 72 for(var i=0;i<tds.length;i++){ 73 var $td=$(tds[i]); 74 $td.html("<input value="+$td.text()+">"); 75 } 76 77 }else{ 78 $(this).val("修改"); 79 var tds= $(this).parent().siblings(); 80 for(var i=0;i<tds.length;i++){ 81 var $td=$(tds[i]); 82 var $ipt=$($td.children()[0]); 83 $td.text($ipt.val()); 84 } 85 } 86 } 87 ); 88 89 } 90 window.onload=function(){ 91 initial(); 92 buttonColor(); 93 } 94 </script> 95 </head> 96 <body> 97 <table class="table table-bordered "> 98 <thead> 99 <td>书名</td> 100 <td>价格</td> 101 <td>库存</td> 102 <td>操作</td> 103 </thead> 104 <tr> 105 <td>红楼梦</td> 106 <td>48</td> 107 <td>20</td> 108 <td> 109 <input type="button" value="修改"> 110 <input type="button" value="删除"> 111 </td> 112 </tr> 113 <tr> 114 <td>水浒传</td> 115 <td>48</td> 116 <td>20</td> 117 <td> 118 <input type="button" value="修改"> 119 <input type="button" value="删除"> 120 </td> 121 </tr> 122 <tr> 123 <td>丑小鸭</td> 124 <td>48</td> 125 <td>20</td> 126 <td> 127 <input type="button" value="修改"> 128 <input type="button" value="删除"> 129 </td> 130 </tr> 131 <tr> 132 <td>西游记</td> 133 <td>25</td> 134 <td>42</td> 135 <td> 136 <input type="button" value="修改"> 137 <input type="button" value="删除"> 138 </td> 139 </tr> 140 <tfoot> 141 <td><input type="text" id="book"></td> 142 <td><input type="text" id="price"></td> 143 <td><input type="text" id="storage"></td> 144 <td> 145 <input type="button" value="增加"> 146 </td> 147 </tfoot> 148 </table> 149 </body> 150 </html>
