Question

我正在尝试在用户端的表中添加新行。我已经完成了，但它只是第一次进入新行，当你第二次点击添加行按钮时，没有任何反应。

function insTableRow(tableID) {
  var x = document.getElementById(tableID);
  var get_row = x.rows[2];
  get_row.style.display = '';
  console.log(get_row);
  $("#" + tableID + " tbody").append(get_row);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i id="add" class="fa fa-plus-circle fa-2x fa-fw" onclick="insTableRow('educationTable')"></i>
<table class="table table-responsive table-bordered order-list" id="educationTable">
  <thead>
    <tr>
      <th>Institute Name</th>
      <th>Qualification</th>
      <th>Admission Date</th>
      <th>Graduation Date</th>
      <th>Degree Scanned Image</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td></td>
    </tr>
    <tr style="display:none;">
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><i id="add" class="fa fa-minus-circle fa-2x fa-fw" onclick="delTableRow('educationTable')"></i></td>
    </tr>
  </tbody>
</table>

工作jsfiddle

任何想法，为什么第二次没有添加新行？

Answer 1

您的问题是因为您选择了同一行并在每次点击时附加了该行。您没有创建新行。要解决此问题，您可以克隆该行并附加该新实例。

另请注意，您应该避免在HTML中使用过时的on*事件处理程序。由于您已经在页面中包含了jQuery，因此您可以使用它来将您的事件附加到HTML之外。此外，您可以使用delete图标上的委派事件处理程序来删除单击的行。试试这个：

＆＃13;

$('#add').click(function() {
  var $row = $('#educationTable').find('tr:last');
  $row.clone().insertBefore($row).show();
});

$('#educationTable').on('click', '.delete', function() {
  $(this).closest('tr').remove();
});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i id="add" class="fa fa-plus-circle fa-2x fa-fw"></i>
<table class="table table-responsive table-bordered order-list" id="educationTable">
  <thead>
    <tr>
      <th>Institute Name</th>
      <th>Qualification</th>
      <th>Admission Date</th>
      <th>Graduation Date</th>
      <th>Degree Scanned Image</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td></td>
    </tr>
    <tr style="display:none;">
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><i class="delete fa fa-minus-circle fa-2x fa-fw"></i></td>
    </tr>
  </tbody>
</table>

＆＃13;

另请注意，我删除了重复的id="number"作为无效的HTML，以便在多个元素中重复相同的id属性。请改为使用类。

Answer 2

这个怎么样......

克隆您的Initial行以创建新行，而不是显示display:none行

function insTableRow(tableID) {
  var x = document.getElementById(tableID);
  var get_row = $(x.rows[1]).clone();
  $("#" + tableID + " tbody").append(get_row);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i id="add" class="fa fa-plus-circle fa-2x fa-fw" onclick="insTableRow('educationTable')"></i>
<table class="table table-responsive table-bordered order-list" id="educationTable">
  <thead>
    <tr>
      <th>Institute Name</th>
      <th>Qualification</th>
      <th>Admission Date</th>
      <th>Graduation Date</th>
      <th>Degree Scanned Image</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td></td>
    </tr>

  </tbody>
</table>

无法动态地在表中添加新行

2 个答案: