自己是小白,最近做项目要实现加减号生成表格,就硬写了js实现该功能,前提是引入JQuery,bootstrap;如下
1 <link rel="stylesheet" href="bootstrap.min.css"> 2 <script src="bootstrap.min.js"></script> 3 <script src="jquery.min.js"></script>
在给+-号设置点样式:
1 .addInputReturn{ 2 background:#2ac476 ; 3 border-radius: 30%; 4 color: white; 5 font-size: large; 6 } 7 .addInputReturn:hover,.delInput:hover{ 8 color: white; 9 } 10 .delInput{ 11 background-color: #f50; 12 border-radius: 30%; 13 color: white; 14 font-size: large; 15 }
html 页面代码如下,td要记得加class类名 是通过类名获取的:
1 <table class="table table-striped table-bordered table-hover" id="sample-table"> 2 <thead> 3 <tr> 4 <th> </th> 5 <th>配件编号</th> 6 <th>配件名称</th> 7 <th>配件数量</th> 8 <th>配件总价</th> 9 <th>已领取数量</th> 10 <th>状态</th> 11 </tr> 12 </thead> 13 <tbody> 14 <tr> 15 <td><a href="javascript:;" class="addInputReturn" > 16 <span class="glyphicon" >十</span> 17 </a></td> 18 <td class="td"><input type="text"></td> 19 <td class="td"><input type="text"></td> 20 <td class="td"><input type="text"></td> 21 <td class="td"><input type="text"></td> 22 <td class="td"><input type="text"></td> 23 <td class="td"><input type="text"></td> 24 </tr> 25 26 </tbody> 27 </table>
以下是JQuery代码;通过点击事件,获取事件源,遍历生成新的表格:
1 /*********** 加减生成表格 ******************** */ 2 $('document').ready(function () { 3 //先获取table,点击class = addInputReturn的 按钮,执行后面的函数 4 $("#sample-table").on('click', '.addInputReturn', function () { 5 /*var td=$("table").children("tbody").html();*/ 6 7 //添加减号 8 /*var th = $("table").children("thead").children("tr").children("th").length-1;*/ 9 var del = ""; 10 del += '<a href="javascript:;" class="delInput" >'; 11 del += '<span class="glyphicon">一</span>'; 12 del += '</a>'; 13 $(this).parent().append(del); 14 //去除加号 15 this.remove(); 16 17 var html = ""; 18 html +='<tr><td>' + 19 '<a href="javascript:;" class="addInputReturn" >' + 20 '<span class="glyphicon" >十</span>' + 21 '</a>' + 22 '</td>'; 23 24 var td = $('tbody tr:first-child .td').each(function () { 25 html +='<td class="td">'; 26 html += $(this).html(); 27 html +='</td>'; 28 29 }); 30 // var td = $(".td")[0]; 31 // console.log(td); 32 33 34 35 /*html += '<tr><td><a href="javascript:;" class="addInputReturn" >'; 36 html += '<span class="glyphicon">十</span> </a></td>'; 37 var tabletext='<td><input type="text"></td>'; 38 for (var i=0;i<th;i++){ 39 html+=tabletext; 40 } 41 html += '</tr>';*/ 42 43 44 // html += td; 45 // html +='</td>'; 46 html +='</tr>'; 47 $("#sample-table").append(html); 48 }); 49 /********表格生成结束*******/ 50 51 52 $("body").on('click', '.delInput', function () { 53 //获取当前点击的元素的父级的父级进行删除 54 $(this).parent().parent().remove(); 55 }); 56 });
这样就好了,很好理解 但是中间出了不少问题记录一下。