1

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

<!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>
4

3 回答 3

1

那是因为当您删除表中的最后一行时，您没有能够克隆的 tr。

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

更新代码

你的这部分代码也是错误的

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

因为一旦最后一行被删除，你就不会找到 tr>last .. 它会返回 false .. 所以尽量避免它..

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

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

检查小提琴

于 2012-09-26T17:11:46.353 回答
0

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

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

像这样的东西应该工作：

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

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

于 2012-09-26T17:12:08.880 回答
0

首先，没有可以克隆的行。您可以通过动态创建它或在隐藏的 div 中保留一行并克隆该 div 来防止这种情况发生。

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

于 2012-09-26T17:12:57.443 回答