Как удалить строку из таблицы, заполненной через foreach - jquery - PullRequest
Новая
       8

Как удалить строку из таблицы, заполненной через foreach - jquery

0 голосов
/ 27 апреля 2020

Я использую foreach для заполнения данных таблицы.

Я использовал длину tr для вычисления общего числа строк, полученных в результате foreach. Получив длину, я добавляю новую строку, увеличивая значение

Я добавил индекс результата foreach к идентификатору, чтобы элементы имели идентификатор при заполнении 

@foreach ($products as $index => $items)
    <tr id="addr{{$index}}">
@endforeach

Выпуск 1:

При попытке увеличить значение пропускается на 1.

Тем не менее я могу добавить новый строк.

Выпуск 2:

Я не могу удалить строки, заполненные через foreach 

$(function (){ 
    var inc = $('#tab_logic tbody tr').length;
// var inc = i;
console.log("first" + inc);
$("#add_row_edit").on("click", function (e) {
    e.preventDefault;
$("#tab_logic").append('<tr id="addr' + (inc + 1) + '"></tr>');
$("#addr" + (inc + 1)).html($("#addr0").html());
inc++
console.log("second" + inc);

// $trNew.find(':input[disabled]').prop('disabled', false);
// $trNew.find(':input').val('');
});
$("#delete_row_edit").click(function () {
    // console.log("third" + inc);
    if (inc > 1) {
                $("#addr" + (inc)).remove();
                inc--;
            }
});

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tab_logic" id="tab_logic">
                    <thead class="orange ">
                        <tr>
                            <th>
                                Product Name
                            </th>
                            <th>
                                HSN Code
                            </th>
                            <th class="center">
                                GST
                            </th>
                            <th>
                                Quantity
                            </th>
                            <th>
                                Rate(per Nos)
                            </th>
                            
                            <th>
                                Amount
                            </th>
                        </tr>
                    </thead>
                    <tbody id="tab_logic_body">
                                                                                                <tr id="addr0">
                            <td>
                                <input type="text" class="product_name autocomplete" placeholder="" value="Full Product Name" disabled="">
                                <input type="hidden" name="product_id[]" value="2" class="product_id">
                            </td>
                            <td>
                                <div class="col s12">
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <input type="text" class="hsn_code autocomplete" placeholder="" value="HSN24">
                                            <input type="hidden" name="hsn_code_id[]" class="hsn_code_id" value="6">
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="col s12">
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <input type="text" class="gst autocomplete" placeholder="GST" name="gst[]" readonly="readonly" value="24">
                                            <input type="hidden" class="gst_price" value="24">
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="col s12">
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <input type="number" name="quantity[]" placeholder="Enter Qty" class="form-control qty" step="0" min="0" value="1">
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="col s12">
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <input type="number" name="product_price[]" placeholder="Enter Price" class="form-control product_price" step="0" min="0" value="100">
                                        </div>
                                    </div>
                                </div>
                            </td>
                            
                            <td>
                                <div class="col s12">
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <input type="number" name="row_total_amount[]" placeholder="Total Amount" class="form-control row_total_amount" step="0" min="0" readonly="readonly" value="118">
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                                                                                                                                                <tr id="addr1">
                            <td>
                                <input type="text" class="product_name autocomplete" placeholder="" value="Product Name Exclusive" disabled="">
                                <input type="hidden" name="product_id[]" value="1" class="product_id">
                            </td>
                            <td>
                                <div class="col s12">
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <input type="text" class="hsn_code autocomplete" placeholder="" value="HSN18">
                                            <input type="hidden" name="hsn_code_id[]" class="hsn_code_id" value="5">
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="col s12">
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <input type="text" class="gst autocomplete" placeholder="GST" name="gst[]" readonly="readonly" value="18">
                                            <input type="hidden" class="gst_price" value="18">
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="col s12">
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <input type="number" name="quantity[]" placeholder="Enter Qty" class="form-control qty" step="0" min="0" value="1">
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="col s12">
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <input type="number" name="product_price[]" placeholder="Enter Price" class="form-control product_price" step="0" min="0" value="100">
                                        </div>
                                    </div>
                                </div>
                            </td>
                            
                            <td>
                                <div class="col s12">
                                    <div class="row">
                                        <div class="input-field col s12">
                                            <input type="number" name="row_total_amount[]" placeholder="Total Amount" class="form-control row_total_amount" step="0" min="0" readonly="readonly" value="118">
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                                                                        
                    </tbody>
                    
                </table>
                
                <table>
                            <thead>
                                <tr>
                                    <th>
                                    <th class="right">
                                        <button type="button" class="btn z-depth-1" id="add_row_edit"><i
                                                class="material-icons">add_box</i>
                                        </button>
                                        <button type="button" class="btn z-depth-1 red" id="delete_row_edit"><i
                                                class="material-icons">remove</i> </button>
                                    </th>
                                    </th>
                                </tr>
                                </thead>
                                </table>

Снимок экрана прилагается

enter image description here

Ответы [ 2 ]

2 голосов
/ 27 апреля 2020

Всегда помните

Массив начинается с индекса 0

Поэтому, когда у вас есть массив, например var a = [1,2,3]. Он будет иметь данные по индексу 0,1,2, а длина массива будет 3.

Вы неправильно поняли это в своем коде

Когда вы добавляете данные в массив, всегда используйте .length не .length + 1. При добавлении вы использовали .length + 1.

При удалении всегда используйте .length - 1. Вы использовали .length Я отредактировал ваш код 

$(function() {
  
  // var inc = i;
  $("#add_row_edit").on("click", function(e) {
    e.preventDefault;
    var inc = $('#tab_logic tbody tr').length;
    $("#tab_logic").append('<tr id="addr' + (inc) + '"></tr>');
    $("#addr" + (inc)).html($("#addr0").html());
    inc++
    console.log("second" + inc);

    // $trNew.find(':input[disabled]').prop('disabled', false);
    // $trNew.find(':input').val('');
  });
  $("#delete_row_edit").click(function() {
    // console.log("third" + inc);
    var inc = $('#tab_logic tbody tr').length;
    if (inc > 1) {
      $("#addr" + ($('#tab_logic tbody tr').length - 1)).remove();
      inc--;
    }
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tab_logic" id="tab_logic">
  <thead class="orange ">
    <tr>
      <th>
        Product Name
      </th>
      <th>
        HSN Code
      </th>
      <th class="center">
        GST
      </th>
      <th>
        Quantity
      </th>
      <th>
        Rate(per Nos)
      </th>

      <th>
        Amount
      </th>
    </tr>
  </thead>
  <tbody id="tab_logic_body">
    <tr id="addr0">
      <td>
        <input type="text" class="product_name autocomplete" placeholder="" value="Full Product Name" disabled="">
        <input type="hidden" name="product_id[]" value="2" class="product_id">
      </td>
      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="text" class="hsn_code autocomplete" placeholder="" value="HSN24">
              <input type="hidden" name="hsn_code_id[]" class="hsn_code_id" value="6">
            </div>
          </div>
        </div>
      </td>
      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="text" class="gst autocomplete" placeholder="GST" name="gst[]" readonly="readonly" value="24">
              <input type="hidden" class="gst_price" value="24">
            </div>
          </div>
        </div>
      </td>
      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="number" name="quantity[]" placeholder="Enter Qty" class="form-control qty" step="0" min="0" value="1">
            </div>
          </div>
        </div>
      </td>
      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="number" name="product_price[]" placeholder="Enter Price" class="form-control product_price" step="0" min="0" value="100">
            </div>
          </div>
        </div>
      </td>

      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="number" name="row_total_amount[]" placeholder="Total Amount" class="form-control row_total_amount" step="0" min="0" readonly="readonly" value="118">
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr id="addr1">
      <td>
        <input type="text" class="product_name autocomplete" placeholder="" value="Product Name Exclusive" disabled="">
        <input type="hidden" name="product_id[]" value="1" class="product_id">
      </td>
      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="text" class="hsn_code autocomplete" placeholder="" value="HSN18">
              <input type="hidden" name="hsn_code_id[]" class="hsn_code_id" value="5">
            </div>
          </div>
        </div>
      </td>
      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="text" class="gst autocomplete" placeholder="GST" name="gst[]" readonly="readonly" value="18">
              <input type="hidden" class="gst_price" value="18">
            </div>
          </div>
        </div>
      </td>
      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="number" name="quantity[]" placeholder="Enter Qty" class="form-control qty" step="0" min="0" value="1">
            </div>
          </div>
        </div>
      </td>
      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="number" name="product_price[]" placeholder="Enter Price" class="form-control product_price" step="0" min="0" value="100">
            </div>
          </div>
        </div>
      </td>

      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="number" name="row_total_amount[]" placeholder="Total Amount" class="form-control row_total_amount" step="0" min="0" readonly="readonly" value="118">
            </div>
          </div>
        </div>
      </td>
    </tr>

  </tbody>

</table>

<table>
  <thead>
    <tr>
      <th>
        <th class="right">
          <button type="button" class="btn z-depth-1" id="add_row_edit"><i
                                                class="material-icons">add_box</i>
                                        </button>
          <button type="button" class="btn z-depth-1 red" id="delete_row_edit"><i
                                                class="material-icons">remove</i> </button>
        </th>
      </th>
    </tr>
  </thead>
</table>
0 голосов
/ 27 апреля 2020

Для удаления строки используйте jquery

$(document).on("click", "a.deleteRow", function () {
        $(this).closest("td").parent("tr").remove();
        calc_total();
        serialNumber();
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...