Question

我在表格中有一个表格。在该表中，我有输入字段的行。我有两个删除行和添加行的选项。在添加行时，用户将单击将添加新行，当用户单击删除行时，将删除最后一行。这一切都很好。但我有一个问题，假设我点击了删除行选项，最后一行将被删除，这样就删除了所有行。现在，当我点击添加行时，它不会添加新行。那么有人可以解决这个问题吗？以下是此

的完整代码

<!DOCTYPE HTML>
<html lang="en-IN">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
  <script type="text/javascript" src="jquery1.7.2.js"></script>
<body>
<style type="text/css">
  table td {
    border: 1px solid #666;
  }
</style>
  <script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#add-line").click(function() {
      var row = jQuery('.form-fields tbody>tr:last').clone(true);
      row.find("input:text").val("");
      row.insertAfter('.form-fields tbody>tr:last');
      return false;
    });
    jQuery('#remove-row').live('click',function(event){
      jQuery(this).parent().parent().remove();
    });
  });
</script>

  <div id="form">
  <table id="form-headings">
    <tr>
      <td width="15%">Remove Rows</td>
      <td width="15%">Product</td>
      <td width="16%">Description</td>
      <td width="13%">Unit Cost</td>
      <td width="14%">Quantity</td>
      <td width="12%">Discount</td>
      <td width="14%">Total</td>
    </tr>
  </table>
  <div class="row">
  <div class="form-fields">
    <table>
      <tr>
        <td><input type="button" id="remove-row" value="Remove Row" /></td>
        <td><input type="text" id="form_product" size="5px"/></td>
        <td><input type="text" id="form_description" size="5px"/></td>
        <td><input type="text" id="form_unit_cost" size="5px"/></td>
        <td><input type="text" id="form_quantity" size="5px"/></td>
        <td><input type="text" id="form_discount" size="5px"/></td>
        <td><input type="text" id="form_total" size="5px"/></td>
      </tr>
    </table>
  </div>
  </div>
  <input type="button" id="add-line" value="Add Line" />
  </div>
</body>
</html>

Answer 1

这是因为当你删除表格中的最后一行时，你没有能够克隆的东西。

在您正在克隆的代码中，然后将其附加到表格中。

更新代码

此部分代码也是错误的

var row jQuery('.form-fields tbody>tr:last').clone(true);
row.insertAfter('.form-fields tbody>tr:last');

一旦删除了最后一行，你就不会发现tr＆gt; last ..它会返回false ..所以试着避免它..

您可以创建一个包含此行结构的虚拟行，并从那里克隆它。

我创建了一个保存行的.prototype类。克隆它并插入它..

检查FIDDLE

Answer 2

当您单击#add-line按钮时，它会克隆表格中的最后一行并将其插入表格的末尾。删除所有行后，这不起作用，因为没有要克隆的最后一行（它不存在）。此外，您将在最后一行之后插入克隆，该克隆不再存在，因此不会将其插入任何位置。

我建议使用jQuery 创建新行，根据需要分配属性，然后将其附加到tbody 。

这样的事情应该有效：

var row =
    jQuery('<tr/>')
    .append(jQuery('<td/>')
        .append('<input/>', {
            type: text,
            ...
        })
    .append(...)
    ...
    .appendTo('.form-fields tbody')
;

另一种选择是创建一个可以创建克隆的示例行，然后追加您的tbody 。您可以使用display: none在标记中包含示例行，也可以创建它并在JavaScript中使用它。

Answer 3

首先，没有可以克隆的行。您可以通过动态创建它，或者在隐藏的div中保留一行并克隆那一行来防范它。

然后你告诉JQuery在最后一个TR之后插入，并且没有TR留下。将其更改为附加到表格中：$('.form-fields tbody').append(row);

在jQuery中删除所有行时，不会添加新行

3 个答案: