Динамическое добавление строки таблицы рядом с первой строкой таблицы вместо первой строки таблицы с использованием JavaScript

Question

Я не знаю, почему, когда я пытаюсь добавить строку таблицы в мою таблицу. Она добавляется только рядом с первой строкой таблицы, а не после первой строки таблицы.

<div class="panel-body">
    <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
        <thead>
          <tr>
          <th width="10%">Quantity</th>
          <th width="10%">Unit</th>
          <th width="30%">Item Description</th>
          <th width="10%">Stock No.</th>
          <th width="10%">Estimated Unit Cost</th>
          <th width="10%">Estimated Cost</th>
          </tr>
        </thead>
        <tr class="wrap_inputs">
        <td><input type="numer" name="quantity[]" class="form-control"></td>
        <td><input type="numer" name="unit[]" class="form-control"></td>
        <td><input type="text" name="item_description[]" class="form-control"></td>
        <td><input type="numer" name="stock_no[]" class="form-control"></td>
        <td><input type="numer" name="eunitcost[]" class="form-control"></td>
        <td><input type="numer" name="ecost[]" class="form-control"></td>
        </tr>

     </table>
</div>

и мой javascript для добавления таблицыстрока это

<script type="text/javascript">
$(document).ready(function() {

var max_fields      = 10;
var wrapper         = $(".wrap_inputs");
var add_button      = $(".add_form_field");

var x = 1;
$(add_button).click(function(e){
    e.preventDefault();
    if(x < max_fields){
        x++;
        $(wrapper).append('<tr>');
        $(wrapper).append('<td><input type="numer" name="quantity[]" class="form-control"></td>');
        $(wrapper).append('<td><input type="numer" name="unit[]" class="form-control"></td>');
        $(wrapper).append('<td><input type="text" name="item_description[]" class="form-control"></td>');
        $(wrapper).append('<td><input type="numer" name="stock_no[]" class="form-control"></td>');
        $(wrapper).append('<td><input type="numer" name="eunitcost[]" class="form-control"></td>');
        $(wrapper).append('<td><input type="numer" name="ecost[]" class="form-control"></td>');
        $(wrapper).append('</tr>');
    }
else
{
  alert('You Reached the limits')
 }
});

$(wrapper).on("click",".delete", function(e){
    e.preventDefault(); $(this).parent('div').remove(); x--;
})
});

скриншот того, что происходит, когда я нажимаю кнопку, чтобы добавить таблицу

что я мог сделать не так?При добавлении класса wrap_input или моего кода JavaScript?

Answer 1

Это происходит из-за этой строки $(wrapper).append('<tr>')...; Здесь $(".wrap_inputs"); - это tr, и этот фрагмент $(wrapper).append('<tr>') создаст еще один tr внутри него.

Также обратите внимание, wrapper - это объект запроса, вы можете не ставить $ перед ним, а также избегать многократного добавления. Либо вы можете сделать .append("<tr><td>...</td></tr>), либо использовать backtick для создания строкового литерала

$(document).ready(function() {

  var max_fields = 10;
  var wrapper = $("#dataTables-example tbody");
  var add_button = $(".add_form_field");

  var x = 1;
  add_button.click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      wrapper.append(`<tr>
  <td><input type="numer" name="quantity[]" class="form- control"></td>
  <td><input type="numer" name="unit[]" class="form-control"></td>
  <td><input type="text" name="item_description[]" class="form-control"</td>   <td><input type="numer" name="stock_no[]" class="form-control"></td>
  <td><input type="numer" name="eunitcost[]" class="form-control"></td>
  <td><input type="numer" name="ecost[]" class="form-control"></td>
  </tr>`);
    } else {
      alert('You Reached the limits')
    }
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
  <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
    <thead>
      <tr>
        <th width="10%">Quantity</th>
        <th width="10%">Unit</th>
        <th width="30%">Item Description</th>
        <th width="10%">Stock No.</th>
        <th width="10%">Estimated Unit Cost</th>
        <th width="10%">Estimated Cost</th>
      </tr>
    </thead>
    <tbody>
      <tr class="wrap_inputs">
        <td><input type="numer" name="quantity[]" class="form-control"></td>
        <td><input type="numer" name="unit[]" class="form-control"></td>
        <td><input type="text" name="item_description[]" class="form-control"></td>
        <td><input type="numer" name="stock_no[]" class="form-control"></td>
        <td><input type="numer" name="eunitcost[]" class="form-control"></td>
        <td><input type="numer" name="ecost[]" class="form-control"></td>
      </tr>
    </tbody>
  </table>
</div>
<button type="button" class="add_form_field">Add</button>

Answer 2

Вы добавляете новые элементы в исходную строку таблицы, добавляя их в «wrap_inputs», который фактически является первой строкой, так что вы в некотором роде вкладываете добавленную строку в жестко закодированную строку

попробуйте обернуть все строки с

<tbody id="wrap_inputs">
    ... your TR ...
</body>

таким образом, добавляя дочерние элементы в wrap_inputs, вы будете добавлять их в тело таблицы, а не в первую строку