当我单击Codeigniter中的添加按钮时，如何在动态表中获得序列号

2024-05-19 • 问答

这是动态表格图片：

我的问题是，当我单击+按钮时，sno的数字应递增，然后在表格的文本框中显示。到目前为止，我已经尝试过，但是没有任何答案。请帮助我解决这个问题，谢谢

查看页面代码：

<table class="table table-bordered table-striped table-xxs" id="tb3">
<thead>
<tr>
<th></th>
<th>sno</th>
<th>Rate</th>
<th>Item Name</th>
<th>Qty</th>
<th>Weight</th>
<th>Total</th>
<th></th></tr>
</thead>
<tbody>

    <tr >
        <td><a href='javascript:void(0);' class='remove'><span class='glyphicon glyphicon-remove' id="remove"></span></a></td>

        <td><input style="width:50px"  type="text" name="sno[]" value="1"></td>

        <td><input style="width:100px" class ="rate" type="text"  name="rate[]"></td>

        <td><select  style="height: 28px; width:250px; " id="select" class="countries" name="itemname[]"><option></option>
<?php foreach ($itemname as $row ): ?> 
<option value="<?=$row['id']?>" <?php echo set_select('itemname',$row['id']); ?>><?=$row['itemname']?></option> 
<?php endforeach ?>
</select></td>

        <td><input style="width:60px"  class="qty" type="text"  name="qty[]"></td>

        <td><input style="width:70px" class="unit" type="text"  name="unit[]"></td>

        <td><input style="width:100px" class="total" type="text" name="total[]"></td>

        <td><a href="javascript:void(0);" style="font-size:18px;" id="addmore" title="Add More Person"><span class="glyphicon glyphicon-plus"></td>

</tr>
</tbody>
</table>

用于添加行和删除行的Javascript代码：

<script>
$(function(){
   $('#addmore').on('click',function() {
        var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
        data.find("input").val('');
});
  $(document).on('click','.remove',function() {
        var trIndex = $(this).closest("tr").index();
          if(trIndex>0) {
             $(this).closest("tr").remove();
             $('.qty').trigger('change');
} else {
        alert("Sorry!! Can't remove first row!");
}
});
});      
</script>

在JS代码中添加一些内容：

   $('.addMore').on('click',function() {
        var data = $(this)
                      .parent()
                      .parent()
                      .last('tr')
                      .clone(true)
                      .appendTo($('#tb3').find('tbody'));
        data.find("input").val('');

        var l = $('#tb3').find('tbody').find('tr').length;
        var s = $('#tb3')
                .find('tbody')
                .find('tr')
                .eq(l-2)
                .find('td')
                .eq(1)
                .find('input')
                .val();

        var sp = Number(s) + 1;
        data.find('td').eq(1).find("input").val(sp); 
 });

或

$('.addMore').on('click',function() {
    var data = $(this)
                  .parent()
                  .parent()
                  .last('tr')
                  .clone(true)
                  .appendTo($('#tb3').find('tbody'));

    data.find("input").val('');

    var s = data
              .prev()
              .find('td')
              .eq(1)
              .find('input')
              .val(); 
    var sp = Number(s) + 1;

    data
        .find('td')
        .eq(1)
        .find("input")
        .val(sp);  
});

还将id中的AddButton更改为一个类。

$(function(){
   $('.addMore').on('click',function() {
        var data = $(this)
                      .parent()
                      .parent()
                      .last('tr')
                      .clone(true)
                      .appendTo($('#tb3').find('tbody'));
        data.find("input").val('');
        
        var l = $('#tb3').find('tbody').find('tr').length;
        var s = $('#tb3')
                .find('tbody')
                .find('tr')
                .eq(l-2)
                .find('td')
                .eq(1)
                .find('input')
                .val();
      
        var sp = Number(s) + 1;
        data.find('td').eq(1).find("input").val(sp);  
  });
  $(document).on('click','.remove',function() {
        var trIndex = $(this).closest("tr").index();
          if(trIndex>0) {
             $(this).closest("tr").remove();
             $('.qty').trigger('change');
          } else {
                alert("Sorry!! Can't remove first row!");
          }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-striped table-xxs" id="tb3">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th>Rate</th>
<th>Item Name</th>
<th>Qty</th>
<th>Weight</th>
<th>Total</th>
<th></th></tr>
</thead>
<tbody>

    <tr >
        <td><a href='javascript:void(0);' class='remove'><span class='glyphicon glyphicon-remove' id="remove"></span></a></td>

        <td><input style="width:50px"  type="text" name="sno[]" value="1"></td>

        <td><input style="width:100px" class ="rate" type="text"  name="rate[]"></td>

        <td><select  style="height: 28px; width:250px; " id="select" class="countries" name="itemname[]"><option></option>
 
<option value="23423">itemname</option> 
<?php endforeach ?>
</select></td>

        <td><input style="width:60px"  class="qty" type="text"  name="qty[]"></td>

        <td><input style="width:70px" class="unit" type="text"  name="unit[]"></td>

        <td><input style="width:100px" class="total" type="text" name="total[]"></td>

        <td><a href="javascript:void(0);" style="font-size:18px;" class="addMore" title="Add More Person"><span class="glyphicon glyphicon-plus">Add</span></td>

</tr>
</tbody>
</table>

设置sno []输入字段的类名称

例如：

<td><input style="width:50px" class="sno" type="text" name="sno[]" value="1"></td>.

在添加行和删除行函数中调用ApplySerialNO（）函数

$('#addMore').on('click',function() {
        var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
        data.find("input").val('');

        ApplySerialNO();
});

$(document).on('click',function() {
    var trIndex = $(this).closest("tr").index();
    if(trIndex>0) {
        $(this).closest("tr").remove();
        $('.qty').trigger('change');

        ApplySerialNO();
    } else {
        alert("Sorry!! Can't remove first row!");
    }
});

此功能清除旧值并附加新的序列号

function ApplySerialNO() {
    var count = 1;

    $(".sno").each(function() {
        var selectedTr = $(this);
        selectedTr.val('');
        selectedTr.val(count);
        count++;
    });
}

当我单击Codeigniter中的添加按钮时，如何在动态表中获得序列号

david_ye007 回答：当我单击Codeigniter中的添加按钮时，如何在动态表中获得序列号

大家都在问