2


0

jqueryは、追加された行内の子のIDと名前をインクリメントします

こんにちは。 長い複雑なフォーム内のテーブルに「More Rows」ボタンを追加しています。行を追加するには、テーブル内の既存の行を複製し、変更してから、テーブルの最後に追加します。

行には、連続して番号が付けられたidおよびname属性を持つ入力が含まれます(例: 最初の行にはid = "Item_Name1"およびname = "Item_Name1"、2番目の行にはid = "Item_Name2"およびname = "Item_Name2"など)。 追加した行でこの番号付けシーケンスを継続する最良の方法を探しています。

これがjQueryです。

jQuery.noConflict();

jQuery(document).ready(function($){
  var i = $("table#table-id tbody tr").length;
  $("button#more-rows").click(function() {
      var clonedRow = $("table#table-id tbody tr:first").clone();
      i++;
      $("*[name*='1']", clonedRow).attr('id', function() {
          var attrval = $(this).attr("id");
          var attrval = attrval.replace( /\d/g , "" );
          return attrval + i
          });
      $("table#table-id").append(clonedRow);
  });
});

これはIDに対しては機能しますが、名前属性をどのようにインクリメントするのですか? これをより簡単に、および/またはより効率的に書くためのヒントも歓迎します。

2 Answer


4


これは役立つ場合と役に立たない場合がありますが、次のとおりです。

PHPを使用している場合、フィールド名の末尾に数字を付けるのではなく、「fieldname []」のように名前を付けて、IDを付けないでください。 したがって、次のようなマークアップがあります。


次に、POSTで値をチェックしているときに(別の仮定)、PHPはそのPOST値の配列を自動的に作成します。

 $value) {
   //values are ordered by the order they appeared in the DOM
   //each value in this array will be a value from an input that had name="Item_Name[]"
}
?>

OR

PHPを使用していない場合、あなたがしていることはうまくいくでしょう。 idに対して行っているのと同じことをnameに対して行ってください。

ただし、行数に基づいてインクリメントすることに加えて、行の削除を許可する場合は、その特定のIDを持つ要素がまだ存在しないことを確認する必要がある場合があります。 そうしないと、「1」と「2」の接尾辞が付いたフィールドを持つ2つの行があり、最初の行を削除してから新しい行を追加すると、「2」の接尾辞が付いたフィールドを持つ2つの行ができます。

name属性が設定され、idがチェックされたコード:

jQuery.noConflict();

jQuery(document).ready(function($) {
    var i = $("table#table-id tbody tr").length;
    $("button#more-rows").click(function() {
        var clonedRow = $("table#table-id tbody tr:first").clone();
        i++;
        $("*[name*='1']", clonedRow).attr('id', function() {
            var attrval = $(this).attr("id");
            attrval = attrval.replace(/\d/g, "");
            while($('#' + attrval + i).size() > 0) {
                i++;
            }
            return attrval + i;
        }).attr('name', function() {
            var attrval = $(this).attr("name");
            attrval = attrval.replace(/\d/g, "");
            return attrval + i;
        });
        $("table#table-id").append(clonedRow);
    });
});


1


パフォーマンス全体についてはわかりませんが、「name」属性を除いて最初とまったく同じように機能する別のattr関数を連鎖させることはできませんか?

    jQuery(document).ready(function($){
      var i = $("table#table-id tbody tr").length;
      $("button#more-rows").click(function() {
          var clonedRow = $("table#table-id tbody tr:first").clone();
          i++;
          $("*[name*='1']", clonedRow).attr('id', function() {
              var attrval = $(this).attr("id");
              var attrval = attrval.replace( /\d/g , "" );
              return attrval + i
          }).attr('name', function() {
              var attrval = $(this).attr("name");
              var attrval = attrval.replace( /\d/g , "" );
              return attrval + i
          });;
          $("table#table-id").append(clonedRow);
      });
    });