Question

我的脚本看起来像这样：

<script type="text/javascript">
    $(document).ready(function() {
    $("#itemRows").on("change", ".jenis", function() {
        var id = $(this).val();
        var dataString = 'jenis=' + id;
        var par = $(this);
        $.ajax({
            type: "POST",
            url: "ajax_menu.php",
            data: dataString,
            cache: false,
            success: function (html) {
                par.closest('tr').find(".bahan").html(html);

            }
        });

    });
    $("#itemRows").on("change", ".bahan", function() {
            var id = $(this).val();

            var $this = $(this);
            var par = $(this).parent().parent().attr("id");

            // $('.par').append(dataParent);
            $.ajax({
                type: "POST",
                url: "ajax_bahan.php",
                data: "bahan="+id+"&parent="+par,
                cache: false,
                success: function(html) {
                    $this.closest('tr').find(".bruto").html(html);
                }
            });

        });

});


var rowNum = 0;
function addRow(frm) {
   rowNum ++;
   var row = '<tr id="'+rowNum+'"><td>'+rowNum+'</td><td><select name="jenis" class="jenis"><option selected="selected">--Jenis Makanan--</option><option value="1">Makanan Pokok</option><option value="2">Daging Telur</option><option value="3">Buah</option><option value="4">Seafood</option><option value="5">Bijian</option><option value="6">Sayuran</option><option value="7">Susu Minyak</option></select></td><td><select name="bahan" class="bahan"><option selected="selected">--Pilih Bahan--</option></select></td><td><div class="bruto"></div></td><td></td><td></td><td></td><td></td><td><input type="button" class="btn btn-warning btn-sm" value="Remove" onclick="removeRow('+rowNum+');"></td></tr>';
   jQuery('#itemRows').append(row);
   frm.add_qty.value = '';
   frm.add_name.value = '';
}

function removeRow(rnum) {
  jQuery('#'+rnum).remove();
}


</script>

我的HTML看起来像这样

<form action="step3.php" method="get" name="gizi">
<table class="table table-striped" id="itemRows" cellpadding="3">
  <tr>
    <th scope="col"> Row Number</th>
    <th scope="col">Jenis</th>
    <th scope="col">Nama Bahan</th>
    <th scope="col">Bruto</th>
    <th scope="col">Energi</th>
    <th scope="col">Karbohidrat</th>
    <th scope="col">Protein</th>
    <th scope="col">Lemak</th>
    <th scope="col"><input class="btn btn-success" onclick="addRow(this.form);" type="button" value="Add row" /></th>
  </tr>


</table>


<input type="submit" name="submit" value="kalkulasi" />
</form>

所有这些动态表单工作正常，...如果我添加了行，...它将添加新行，..并在coloumn“Number Row”中增加

<tr id="1">
  <td>1</td>
  <td>
    <select name="jenis" class="jenis">
      <option selected="selected">--Jenis Makanan--</option>
      <option value="1">Makanan Pokok</option>
      <option value="2">Daging Telur</option>
      <option value="3">Buah</option>
      <option value="4">Seafood</option>
      <option value="5">Bijian</option>
      <option value="6">Sayuran</option>
      <option value="7">Susu Minyak</option>
    </select>
  </td>
  <td>
    <select name="bahan" class="bahan">
      <option selected="selected">--Pilih Bahan--</option>
    </select>
  </td>
  <td>
    <div class="bruto"></div>
  </td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td>
    <input type="button" class="btn btn-warning" value="Remove" onclick="removeRow(1);">
  </td>
</tr>

<tr id="2">
  <td>2</td>
  <td>
    <select name="jenis" class="jenis">
      <option selected="selected">--Jenis Makanan--</option>
      <option value="1">Makanan Pokok</option>
      <option value="2">Daging Telur</option>
      <option value="3">Buah</option>
      <option value="4">Seafood</option>
      <option value="5">Bijian</option>
      <option value="6">Sayuran</option>
      <option value="7">Susu Minyak</option>
    </select>
  </td>
  <td>
    <select name="bahan" class="bahan">
      <option selected="selected">--Pilih Bahan--</option>
    </select>
  </td>
  <td>
    <div class="bruto"></div>
  </td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td>
    <input type="button" class="btn btn-warning" value="Remove" onclick="removeRow(2);">
  </td>
</tr>

<tr id="3">
  <td>3</td>
  <td>
    <select name="jenis" class="jenis">
      <option selected="selected">--Jenis Makanan--</option>
      <option value="1">Makanan Pokok</option>
      <option value="2">Daging Telur</option>
      <option value="3">Buah</option>
      <option value="4">Seafood</option>
      <option value="5">Bijian</option>
      <option value="6">Sayuran</option>
      <option value="7">Susu Minyak</option>
    </select>
  </td>
  <td>
    <select name="bahan" class="bahan">
      <option selected="selected">--Pilih Bahan--</option>
    </select>
  </td>
  <td>
    <div class="bruto"></div>
  </td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td>
    <input type="button" class="btn btn-warning" value="Remove" onclick="removeRow(3);">
  </td>
</tr>

如果我删除第1行和第2行，s脚本中只有第3行，但是如何使第3行将“行号”的值更改为3到1？（我的意思是重新排列这一行）？

Answer 1

在removeRow(rnum)函数中，删除行后，您可以在row + 1内将每个tbody的行号设置为其索引。因此，您的代码看起来像这样：

var newId;
function removeRow(rnum) {
    jQuery('#'+rnum).remove();
    $('tr').each(function() {
        newId =  $(this).index() + 1;
        $(this).children('td').first().html(newId);   // Change value in first td
        $(this).attr('id', newId);                    // Change the id of the row
    });
}

以动态形式重新排列数字行

1 个答案: