0

HTML テーブルがあり、ユーザーがボタンをクリックして新しい行を追加できるようにしたいのですが、新しい行はテーブルの最後ではなく、入力フィールドの最後の行の後に追加されます。

サンプルの JSFiddle を次の場所にセットアップしました。

http://jsfiddle.net/n7Gup/2/

新しい行ボタンがありますが、入力の最後の行 (つまり、新しい行ボタンがある行) を複製していません。これらの入力行の最後の行の後に新しい行が挿入されるように、これを変更する必要があります。

オンラインチュートリアルから見つけたスクリプトは次のとおりです。

$(document).ready(function($)
{
  // trigger event when button is clicked
  $("#button2").click(function()
  {
    // add new row to table using addTableRow function
    addTableRow($("#nextYear"));

    // prevent button redirecting to new page
    return false;
  });

  // function to add a new row to a table by cloning the last row and
  // incrementing the name and id values by 1 to make them unique
  function addTableRow(table)
  {
    // clone the last row in the table
    var $tr = $(table).find("tbody tr:last").clone();

    // get the name attribute for the input and select fields
    $tr.find("input,select").attr("name", function()
    {
      // break the field name and it's number into two parts
      var parts = this.id.match(/(\D+)(\d+)$/);

      // create a unique name for the new field by incrementing
      // the number for the previous field by 1
      return parts[1] + ++parts[2];
    // repeat for id attributes
    }).attr("id", function()
    {
      var parts = this.id.match(/(\D+)(\d+)$/);
      return parts[1] + ++parts[2];
    });

    // append the new row to the table
    $(table).find("tbody tr:last").after($tr);
  };
});

作成された新しい行では、ユーザーが再び開始するため、すべての入力フィールドを空にすることができます。また、[新しい行] ボタンを 1 回だけ表示する方法もあり、それは常にアクティビティ入力の最後の行になります。たとえば、最初は 1 行しかありませんが、[新しい行] ボタンをクリックすると、最初の行の下に 2 番目の行が作成され、[新しい行] ボタンはこの新しく作成された行にのみ表示されます。

助けに感謝します-私はJavascriptが初めてです。

4

1 に答える 1

2

ここに解決策があります

http://jsfiddle.net/7vuZf/3/

基本的には、クリックされたボタンへの参照を渡し、そこからテーブル内の位置を決定します - 現在の最後の行への参照を保存し (closest() を使用して)、それを (イベントで) 複製し、新しい行ボタンを削除しますオリジナル（おそらく削除ボタンに置​​き換える必要があります）、オリジナルの後にクローンを挿入します。

また、クリック ハンドラーに渡されるテーブル オブジェクトへの参照はおそらく必要ありません (ただし、コードに残しました)。

于 2012-08-15T04:20:20.973 に答える