夏日博客

A-A+

jquery动态增加表格行或者列的例子

2016年01月11日 前端设计 暂无评论 阅读 5 views 次

jquery动态增加表格行或者列方法非常的简单我们只要创建表input与表格行就可以实现了，具体的实现程序如下，我们一起来看看。

分享一下代码吧！html:

  1. <div class="table-responsive" id="Bk_table" style="display:none;">  
  2.                     <table class="table table-hover table-bordered">  
  3.                         <thead>  
  4.                             <tr>  
  5.                                 <th>  
  6.                         <div class="out">   
  7.                             <b>板块</b>   
  8.                             <em>维度</em>   
  9.                         </div>  
  10.                         </th>  
  11.                         </tr>  
  12.                         </thead>  
  13.                         <tbody>  
  14.                         </tbody>  
  15.                     </table>  
  16.  </div>  

js操作如下：

  1. deleteLie: function () { //删除一列  
  2.             var index = $(this).parent().index();  
  3.             for (var i = 0; i < $(".table tr").length; i++) {  
  4.                 $($(".table tr")[i]).children().eq(index).remove();  
  5.             }  
  6.             if ($(".table tr").length == 1 && $(".table tr").eq(0).children().length == 1) {  
  7.                 $("#Bk_table").hide();  
  8.                 $(".blankShow").show();  
  9.             }  
  10.         },  
  11.         deleteOneline: function () { //删除一行  
  12.             $(this).parent().parent().remove();  
  13.             if ($(".table tr").length == 1 && $(".table tr").eq(0).children().length == 1) {  
  14.                 $("#Bk_table").hide();  
  15.                 $(".blankShow").show();  
  16.             }  
  17.         },  
  18.         addOneBk: function () { //增加一列  
  19.             if ($("#Bk_table").is(":hidden")) {  
  20.                 $("#Bk_table").show();  
  21.             }  
  22.             if ($(".blankShow").is(":visible")) {  
  23.                 $(".blankShow").hide();  
  24.             }  
  25.             var firstLie = ' <th class="hovershow"><span class="font_zs" style="display:none">中弘西岸3</span>' +  
  26.                     '<input type="text" class="form-control getPrevalue" placeholder="填写板块名称" />' +  
  27.                     '<a class="glyphicon glyphicon-remove bkdelete delete_lie"></a></th>';  
  28.             $(".table>thead>tr").eq(0).append(firstLie);  
  29.             var otherLie = '<td><input type="text" class="form-control" value="" placeholder="1-5之间数字" ' +  
  30.                     'onkeyup="if(isNaN(value)||parseFloat(value)>5||parseFloat(value)<1)execCommand(\'undo\')"' +  
  31.                     'onafterpaste="if(isNaN(value)||parseFloat(value)>5||parseFloat(value)<1)execCommand(\'undo\')" /></td>';  
  32.             $(".table>tbody>tr").append(otherLie);  
  33.         },  
  34.         addWd: function () { //增加一行  
  35.             if ($("#Bk_table").is(":hidden")) {  
  36.                 $("#Bk_table").show();  
  37.             }  
  38.             if ($(".blankShow").is(":visible")) {  
  39.                 $(".blankShow").hide();  
  40.             }  
  41.             var Wdhtml_1 = '<tr>' +  
  42.                     ' <th scope="row" class="hovershow">' +  
  43.                     '<span class="font_zs t1" style="display:none">维度三</span>' +  
  44.                     '<input type="text" class="form-control getPrevalue" placeholder="填写维度名称"  />' +  
  45.                     '<a class="glyphicon glyphicon-remove bkdelete deleteoneline"></a>' +  
  46.                     '</th>';  
  47.             var Wdhtml_2 = "";  
  48.             var LieLength = $(".table>thead>tr").children().length - 1;  
  49.             if (LieLength > 0) {  
  50.                 for (var i = 0; i < LieLength; i++) {  
  51.                     Wdhtml_2 = Wdhtml_2 + ' <td><input type="text" class="form-control" value="" placeholder="1-5之间数字" onkeyup="if(isNaN(value)||parseFloat(value)>5||parseFloat(value)<1)execCommand(\'undo\')" onafterpaste="if(isNaN(value)||parseFloat(value)>5||parseFloat(value)<1)execCommand(\'undo\')" /></td>';  
  52.                 }  
  53.             }  
  54.             var Wdhtml_3 = '</tr>';  
  55.             var allWd = Wdhtml_1 + Wdhtml_2 + Wdhtml_3;  
  56.             $(".table>tbody").append(allWd);  
  57. }  

以上贴出的是部分代码，有问题可以交流！

标签：

给我留言