0

我希望序列号：每当动态插入一行时增加。并且当任何行被删除时，无论是在开头还是结尾或中间，数字都应该以正确的顺序重新排列。我是一个新鲜人，无法理解如何做到这一点。任何人都可以指导我。提前感谢您的支持。

我在下面给出了我的示例编码。单击“(+)” 按钮时，该行会自动增加。发生这种情况时，我希望序列号也自动增加。并且当任何行被删除时（即使在表格中间），数字应该会自动以正确的顺序自行调整。请指导我。

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