1

テーブルの中にフォームがあります。そのテーブルには、入力フィールドの行があります。行を削除して行を追加するための2つのオプションがあります。行の追加では、ユーザーがクリックすると新しい行が追加され、ユーザーが行の削除をクリックすると最後の行が削除されます。これはすべて正常に機能しています。しかし、[行の削除]オプションをクリックしたとすると、最後の行が削除され、この方法ですべての行が削除されるという問題があります。ここでも、[行の追加]をクリックしても、新しい行は追加されません。それで、誰かがこれを解決できますか？これがこのための完全なコードです

<!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クラスを作成しました。クローンを作成して挿入します。

FIDDLEを確認してください

于 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')
;

もう1つのオプションは、クローンを作成できるサンプル行を作成してから、その行を追加することtbodyです。を使用してマークアップにサンプル行を含めるdisplay: noneことも、作成してJavaScriptで使用できるようにすることもできます。

于 2012-09-26T17:12:08.880 に答える
0

まず、複製する行が残っていません。その場で作成するか、非表示のdivに行を保持して、その1つを複製することで、これを防ぐことができます。

次に、最後のTRの後に挿入するようにJQueryに指示しているのですが、TRが残っていません。テーブルに追加するように変更します。$('.form-fields tbody').append(row);

于 2012-09-26T17:12:57.443 に答える