0

我的要求是单击（+）按钮，表中的行应该不断添加。我已经使用下面给定的代码实现了这一点。同样，当单击“删除”按钮时，相应的行也会被删除。两种功能都运行良好。问题是当最后一行被删除时，&当单击“（+）”按钮时，行不增加，bcoz 的 removeClass 函数。任何人都可以帮助如何检查删除的行是最后一行以及如何将添加类添加到前一行。下面给出的编码 r。请帮助解决此问题。我是编码方面的新手，如果编码中有任何错误，请突出显示。提前致谢..

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
id=1;
$('#butVal').click(function(){


        var master = $(this).parents("#table-2");
        id++;   
        var sample = master.find('.tabRow').clone();    
        sample.attr("id", id + "item"); 
        master.find('.tabRow').removeClass();
        master.find('tbody').append(sample);
        //alert(master);
        //alert(sample);
        //alert(sample.html());
      //alert(master.html());

var rowLen =  $('#table-2 > tbody >tr').length;

//alert(rowLen);
if(rowLen>9)
{
alert("no of row is reached 10");
}


   }

);

$('table#table-2 button.remove').live('click', function(){

var rem =$(this).parents('tr').remove();
} );


});

//jquery ends here
</script>

<style type="text/css">
.add select
{
width:100%;
}
</style>
<body>



<table id="table-2" class="add" border ="1">

<thead>
<!-- <tr><td><button id="butVal">Click</button></td></tr> -->
<tr><th> S.No</th><th> Product Status </th> <th> Stock Status</th> <th> Description</th> <th> Quantity </th> <th> Price </th> <th>  Total </th >
<th> <button id="butVal"> + </button></th></tr> 
</thead>

<tbody>
<tr class="tabRow" id="1item">
<td> <input type="text" name="sno"/> </td>
<td><select><option> New </option><option> Old </option></select> </td>
<td><select><option> In Stock </option><option> Out Of Stock </option></select> </td>
<td> <input type="text" name="desc"/>  </td>
<td> <input type="text" name="qty"/> </td>
<td> <input type="text" name="price"/> </td>
<td> <input type="text" name="total"/> </td>
<td><button class="remove">Remove</button></td>
</tr>
</tbody>

<tfoot>
<tr>

<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> Grand Total </td>
<td> &nbsp; </td>
<td> <center>  </center> </td>


</tr>
</tfoot>

</table>


</div>







</body>






</html>
4

1 回答 1

1

当您 tr 在 remove 函数中删除最后一个然后尝试添加新的 tr时，它会失败，因为没有要克隆并附加到 DOMtr的 class 属性的标记。.tabRow

所以在删除最后一个之前的删除函数中 tr ，你应该在最后一个之前添加.tabRow类 tr 。你可以使用jquery prev()方法来做到这一点。

更新 ：

我检查了您的代码并对其进行了如下编辑：

1-在添加函数中，我添加了应该删除的类名

   master.find('.tabRow').removeClass('tabRow');

2-在删除功能中我添加了 2 个条件。首先检查当前单击的 tr 是否是唯一的 tr ，停止删除它。第二，如果当前单击的 tr 是最后一行，则将 tabRow 类添加到其上一行

  if($("table#table-2 tbody tr").length > 1)
  {
     if($("table#table-2 tbody tr").index($(this).parents('tr')) ==$("table#table-2 tbody tr").length -1)
     {
       $(this).parents('tr').prev().addClass("tabRow");
     }
     $(this).parents('tr').remove();
  }
 else
 {
    alert("you can.t remove this record");
 }

它对我来说应该是有效的。

于 2012-08-11T20:18:52.910 回答