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

您要将新元素添加到原始表行中，方法是将它们添加到“ wrap_inputs”（实际上是第一行），因此您可以将添加的行嵌套在硬编码的行中

尝试用

包装所有行

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

这样，在将childs附加到wrap_inputs时，您会将它们添加到表主体中，而不是第一行中

Answer 2

发生这种情况的原因是，这行$(wrapper).append('<tr>')...;在这里$(".wrap_inputs");是tr，而此代码段$(wrapper).append('<tr>')将在其中创建另一个tr。

还要注意wrapper是一个查询对象，您可以避免将$放在其前面，也可以避免多次追加。您可以执行.append("<tr><td>...</td></tr>)或使用使用反引号创建字符串文字

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

使用javascript动态在第一个表格行旁边添加表格行，而不是在第一个表格行之后添加

2 个答案: