0

行が動的に挿入されるたびにシリアル番号: を増やしたい。また、最初、最後、または途中で行が削除されると、番号は適切な順序で再配置されます。私は初心者で、それを行う方法についての論理を得ることができませんでした。誰でも同じことを教えてもらえますか。ご支援いただきありがとうございます。

以下にサンプルコーディングを示します。「(+)」ボタンをクリックする と、行が自動的に増えます。その際、シリアルナンバーも自動でインクリメントして欲しいです。また、任意の行が削除されると (テーブルの途中であっても)、数値は適切な順序で自動的に調整されます。Pls は同じで私を案内します。

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
id=1;
var serial =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('tabRow');
        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(){


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

</script>

<style type="text/css">
.total
{
border:1px solid black;
width:90%;
height:1250px;
margin-left:auto;
margin-right:auto;
}
.add
{
width:100%; 
}
.add select,input
{
width:100%;
}
</style>
</head> 
<body>

<div class="total">

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

<thead>

<tr><th class="small"> S.No</th><th> Product Status </th> <th> Stock Status</th> <th class="sizing"> 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 class="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>  <button id="proceed" onClick="payment();"> Proceed </button>   </td>


</tr>
</tfoot>

</table>

</div>
</body>






</html>
4

1 に答える 1

5

jsfiddle.netでコードにいくつか変更を加えました。リンクは次のとおりです：http：//jsfiddle.net/2nzgG/30/。私のコメントはすべてjavascriptセクションにあります。これがあなたが探しているものであることを願っています。他に何か必要な場合はお知らせください。

編集：

以下のコードも追加しましたが、コメントはリンクにあります...

$(document).ready( function() {

$('#butVal').click(function(){
   var rowLen =  $('tr.tabRow').length;

    if(rowLen>9)
    {
          alert("no of row is reached 10");
    }
    else
    {
   $("tr.tabRow:first").clone(true).appendTo("#table-2>tbody");  
    $(".tabRow:last").children("td").children("input").each(function(index, element){
        $(element).val("");
    });
    }
    });


$(document).on("click", "button.remove", function(){

 if($(this).parents("tr").siblings("tr.tabRow").length > 0)
  {
     $(this).closest("tr.tabRow").remove();        
  }
 else
 {
    alert("you can.t remove this record");
 }
});


//FOR Serial Number- use ON 
    $(document).on("click", ".add, .remove", function(){

       $("td.sno").each(function(index,element){                 
           $(element).text(index + 1); 
        });
    });
});
于 2012-08-17T00:52:26.503 に答える