Question

我在单击添加行时动态生成表行，并在单击删除行时删除生成的行。当我使用jquery获取id属性值时，只获取第一行的值，并获取未定义的其他动态生成的行。

SCRIPT：

$(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>

Answer 1

如果动态添加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>

SCRIPT

$(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);
      });

           });

为tbody中动态生成的表行的id属性获取值未定义

1 个答案: