0

私のスクリプトは次のようになります。

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

この動的フォームはすべて正常に機能します...行を追加すると、..新しい行が追加され、列「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を削除すると、スクリプトには行番号3しかありません..しかし、この行番号3を作成して「行番号」の値を3から1に変更するにはどうすればよいですか? （つまり、この行を並べ替えます）？

4

1 に答える 1

0

関数では、行を削除した後、removeRow(rnum)それぞれの行番号を+ 1row内のインデックスに設定でき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
    });
}
于 2013-09-24T23:28:06.887 に答える