0

私の要件は、（+）ボタンをクリックすることです。テーブルの行は追加され続ける必要があります。以下のコードを使用してすでに達成しています。また、「削除」ボタンをクリックすると、対応する行が削除されます。どちらの機能も問題なく動作します。問題は、最後の行を削除したとき & 「(+)」ボタンをクリックしても行が増えない、removeClass 関数の bcoz です。削除された行が最後の行であることを確認する方法と、前の行にクラスを追加する方法を教えてください。コーディング 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

remove 関数で最後 tr を削除してから新しい を追加しようとすると、クローンされて DOM に追加されるclass 属性を持つタグ trがないため、失敗します。tr.tabRow

そのため、最後のものを削除する前に削除機能で、最後のものの前にクラスを tr 追加する必要があります。jquery prev()メソッドを使用してこれを行うことができます。.tabRow tr

アップデート ：

私はあなたのコードをチェックし、以下のように編集しました:

1-追加機能で、削除する必要があるclassNameを追加しました

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

2-そして削除機能に2つの条件を追加しました。最初に、現在クリックされている tr が唯一の tr であるかどうかを確認し、削除を停止します。2番目、現在クリックされている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 に答える