3

フィールドのテーブルと、ユーザーが複製できるフィールドのいくつかを含むフォームが必要です。いくつかのヘッダー フィールド (つまり、請求書の日付、顧客名など) を持つ請求書を想像してください。次に、任意の数の詳細行 (つまり、製品、数量、価格) があり、最後にいくつかのフッター フィールド (つまり、税金) があります。 、合計など）。最初に 1 つの詳細行を含むフォームを表示し、ユーザーがボタンをクリックして詳細行を追加できるようにしたいと思います。jQuery を使用してこれを行いたいと思います。

単一のテーブル行を複製する方法を示す複数の例を見つけましたが、より柔軟なものを作成したいと思います。複数のテーブル行を指定して、ボタンをクリックしたときにクローンを作成できるようにしたいと考えています。

これまでのところ、次のコードがあります。

<form action="" method="post">
  <table border="0" align="center" cellpadding="2" cellspacing="1" id="invoice">
    <tr>
      <td>Name:</td>
      <td><input name="name" type="text" id="name" size="50" maxlength="100"></td>
    </tr>
    <tbody class="multi">
      <tr>
        <td>Product:</td>
        <td><input name="product[]" type="text" size="50" maxlength="50"></td>
      </tr>
      <tr>
        <td>Qty:</td>
        <td><input name="qty[]" type="text" size="5" maxlength="5"></td>
      </tr>
      <tr>
        <td>Price:</td>
        <td><input name="price[]" type="text" size="10" maxlength="10"></td>
      </tr>
    </tbody>
    <tr>
      <td>Tax:</td>
      <td><input name="tax" type="text" id="tax" size="10" maxlength="10"></td>
    </tr>
      <td>&nbsp;</td>
      <td><input type="button" id="addline" value="Add Another Line">
        <input name="Submit" type="submit" value="Submit Invoice"></td>
    </tr>
  </table>
</form>

この HTML はこの例のために短縮されていますが、"multi" のクラスを持つ tbody に配置することで、複製される表の行を指定していることがわかります。送信されたフォームを処理するために PHP を使用するため、複製されるフィールドの末尾に [] があります (これは PHP の配列処理機能を使用します)。複製される行の上下に任意の数のテーブル行が存在する可能性がありますが、簡潔にするために 1 つだけ示しました。

次に、次のような JavaScript があります。

$(document).ready(function($) {
  $('#addline').click(function() {
    $('#invoice > tbody.multi').clone().insertAfter('#invoice > tbody.multi');
  });
});

これは、複製したい行のブロック全体を選択し、それを複製して複製ブロックの直後に挿入することを意図しています。

これは機能しますが、問題は、[行の追加] ボタンをクリックした後、「マルチ」のクラスを持つ 2 つの tbody ブロックになってしまうことです。したがって、[行を追加] ボタンを 2 回目にクリックすると、両方の tbody ブロックが複製され、最終的に 4 つの tbody ブロックが作成されます。

これを修正する最善の方法は何ですか? 新しく複製された tbody のクラスを変更して、将来の複製に含まれないようにする必要がありますか? または、これを完全に処理するより良い方法はありますか?

多くの例で見たように、1 行だけでなく、一度に複数のテーブル行を複製できるようにしたいことを思い出してください。また、いくつかの例で、jQuery コード内で複製されるすべてのテーブルとフォームの HTML が含まれているのを見てきました。最後に、重複したフィールドの値をクリアし、重複したブロックを削除できるようにするとよいでしょう。

4

1 に答える 1

2

複数の s が必要な場合<tbody>(これで問題なく、HTML が適切に整理されます) 、クローン作成時に最後の s:lastのみを選択するように混ぜて、最後tbody.multiにクローンを追加するようにします。

$('#addline').click(function() {
    $('#invoice > tbody.multi:last').clone().insertAfter('#invoice > tbody.multi:last');
});​

val次に、単純な呼び出しで複製された入力をクリアできます。

$('#addline').click(function() {
    var clone = $('#invoice > tbody.multi:last').clone();
    clone.find('input').val('');
    clone.insertAfter('#invoice > tbody.multi:last');
});

デモ: http://jsfiddle.net/aeYED/1/

于 2012-05-08T06:12:25.620 に答える