Question

我的要求是点击（+）按钮，表格中的行应该继续添加。我已经使用下面给出的代码实现了。此外，单击“删除”按钮时，相应的行将被删除。两种功能都很好。问题是当最后一行被移除时，＆amp;当单击“（+）”按钮时，行不会增加，removeClass函数的bcoz。请允许任何人帮助如何知道删除的行是最后一行以及如何将addClass添加到上一行。下面给出了编码。请帮助解决此问题。如果在编码中有任何错误，请更新编码。提前谢谢..

<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>

Answer 1

当您删除删除功能中的最后一个 tr 然后尝试添加新的 tr时，它会失败，因为没有tr标记，其class属性为.tabRow to被克隆并附加到DOM。

所以在删除最后一个 tr 之前的删除功能中，您应该将.tabRow类添加到最后一个 tr 之前。您可以使用jquery prev()方法执行此操作。

更新：

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

1-在add函数中我添加了应该删除的className

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

它对我有用。

如何在jquery中添加已加载内容的类？

1 个答案: