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

如果您动态添加它并且它以数字开头，jQuery 将不会获取它。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 回答