1

行の追加をクリックするとテーブル行が動的に生成され、行の削除をクリックすると生成された行が削除されます。jqueryを使用してid属性値を取得すると、最初の行の値のみが取得され、動的に生成された他の行は未定義になります。

脚本：

$(document).ready(function()
           {
               $('#add').click(function()
           {
               var id=parseInt($('#main tbody tr:last').attr('id'))+1;
               $('#main > tbody:last').append("<tr class=\"edit_tr\" id=\""+id+"\" ><td>"+id+"</td><td><textarea class=\"editbox\" id=\"parti_input_"+id+"\" rows=\"1\" cols=\"50\"></textarea></td><td><input type=\"text\" class=\"editbox qty\" id=\"qty_input_"+id+"\" /></td><td><input type=\"text\" class=\"editbox rs\" id=\"amountrs_input_"+id+"\" /></td><td><input type=\"text\" class=\"editbox p\" id=\"amountp_input_"+id+"\" /></td><td id=\"netamountrs_"+id+"\" ></td><td id=\"netamountp_"+id+"\"></td></tr>");

               });


           $('#del').click(function()
           {
               $('#main tbody tr:last').remove();

           }
           );

          $('#cal').click(function()
      {
          var c=$('#main tbody tr').length;
          var i;
          for(i=0;i<c;i++)
          {
              var d=$('#main tbody tr').val();
              document.write(d);
          }
          alert(c);
      });

           });

HTML:

<table width="800" border="1" style="border-collapse: collapse;" id="main">
 <tbody><tr class="edit_tr" id="1"><td>1</td><td><textarea class="editbox part" id="parti_input_1" rows="1" cols="50"></textarea></td><td><input type="text" class="editbox qty" id="qty_input_1" /></td><td><input type="text" class="editbox rs" id="amountrs_input_1" /></td><td><input type="text" class="editbox p" id="amountp_input_1" /></td><td id="netamountrs_1"></td><td id="netamountp_1"></td></tr></tbody>
   </table>
            <p id="cal">calculate</p>
4

1 に答える 1

0

ID を動的に追加し、番号で始まる場合、jQuery は ID をフェッチしません。HTML 4 のオブジェクトは数字で始めることはできません。

data-id=""そのため、 を作成してから を使用する必要があります.data("id")。

HTML:

<table width="800" border="1" style="border-collapse: collapse;" id="main">
<tbody><tr class="edit_tr" data-id="1"><td>1</td><td><textarea class="editbox part" id="parti_input_1" rows="1" cols="50"></textarea></td><td><input type="text" class="editbox qty" id="qty_input_1" /></td><td><input type="text" class="editbox rs" id="amountrs_input_1" /></td><td><input type="text" class="editbox p" id="amountp_input_1" /></td><td id="netamountrs_1"></td><td id="netamountp_1"></td></tr></tbody>
</table>
        <p id="cal">calculate</p>

脚本

$(document).ready(function()
           {
               $('#add').click(function()
           {
               var id=parseInt($('#main tbody tr:last').data('id'))+1;
               $('#main > tbody:last').append("<tr class=\"edit_tr\" data-id=\""+id+"\" ><td>"+id+"</td><td><textarea class=\"editbox\" id=\"parti_input_"+id+"\" rows=\"1\" cols=\"50\"></textarea></td><td><input type=\"text\" class=\"editbox qty\" id=\"qty_input_"+id+"\" /></td><td><input type=\"text\" class=\"editbox rs\" id=\"amountrs_input_"+id+"\" /></td><td><input type=\"text\" class=\"editbox p\" id=\"amountp_input_"+id+"\" /></td><td id=\"netamountrs_"+id+"\" ></td><td id=\"netamountp_"+id+"\"></td></tr>");

               });


           $('#del').click(function()
           {
               $('#main tbody tr:last').remove();

           }
           );

          $('#cal').click(function()
      {
          var c=$('#main tbody tr').length;
          var i;
          for(i=0;i<c;i++)
          {
              var d=$('#main tbody tr').val();
              document.write(d);
          }
          alert(c);
      });

           });
于 2013-08-11T15:27:22.680 に答える