Переставить номер строки в динамическом виде

Question

Переставить номер строки в динамическом виде

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>

Вся эта динамическая форма отлично работает... Если я добавил строку, она добавит новую строку,.. и добавит в 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, то в скрипте будет только строка 3, но как заставить эту строку номер 3 изменить значение "Строка номер" с 3 по 1? (Я имею в виду перестроить этот ряд)?

wawanmadda 25 сен. 2013, в 02:03

Источник

Теги:

jquery

1 ответ

Ещё вопросы

Sadiq · Accepted Answer · 2013-09-24T21-23-00.000Z

В вашей функции removeRow(rnum) после удаления строки вы можете установить номер row каждой row в свой индекс внутри tbody + 1. Таким образом, ваш код будет выглядеть примерно так:

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
    });
}