獲取動態表值

Question

在下面的代碼中，我有一個動態表，我將添加多行並在點擊提交按鈕時輸入值我想要所有的錶行values.Pls幫助我做到這一點。下面提供的代碼請有一個參考。

$(document).ready(function() { 
     var i = 1; 
     $("#add_row").click(function() { 
      $('#addr' + i).html("<td>" + (i + 1) + "</td><td><input name='name" + i + "' type='text' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail" + i + "' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile" + i + "' type='text' placeholder='Mobile' class='form-control input-md'></td>"); 

      $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>'); 
      i++; 

      Test(); 
     }); 
     $("#delete_row").click(function() { 
      if (i > 1) { 
       $("#addr" + (i - 1)).html(''); 
       i--; 
      } 
     }); 

    }); 

     <div class="row clearfix"> 
     <div class="col-xs-4 column"> 
      <table class="table table-bordered table-hover" id="tab_logic"> 
       <thead> 
        <tr > 
         <th class="text-center"> 
          # 
         </th> 
         <th class="text-center"> 
          Start Range 
         </th> 
         <th class="text-center"> 
          End Range 
         </th> 
         <th class="text-center"> 
          Value 
         </th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr id='addr0'> 
         <td> 
         1 
         </td> 
         <td> 
         <input type="text" name='name0' placeholder='Start Range' class="form-control"/> 
         </td> 
         <td> 
         <input type="text" name='mail0' placeholder='End Range' class="form-control"/> 
         </td> 
         <td> 
         <input type="text" name='mobile0' placeholder='Value' class="form-control"/> 
         </td> 
        </tr> 
        <tr id='addr1'></tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
<input type="button" text="Submit" /> 

Answer 1

要刪除該行，您無法獲取要刪除的行。

剛剛嘗試這一點

$(document).ready(function() { 
    var i=0; 
    $("#add_row").click(function() { 
     i=i+1; 
     $('#tab_logic tbody').append("<tr><td>" + i + "</td><td><input name='name" + i + "' type='text' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail" + i + "' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile" + i + "' type='text' placeholder='Mobile' class='form-control input-md'></td><td><button type="button" class="delete">Delete</button></td></tr>"); 

     Test(); 
    }); 
    $(".delete").click(function() { 
     $(this).parent().parent().remove(); 
    }); 
}); 

<div class="row clearfix"> 
    <div class="col-xs-4 column"> 
     <table class="table table-bordered table-hover" id="tab_logic"> 
      <thead> 
       <tr > 
        <th class="text-center"> 
         # 
        </th> 
        <th class="text-center"> 
         Start Range 
        </th> 
        <th class="text-center"> 
         End Range 
        </th> 
        <th class="text-center"> 
         Value 
        </th> 
        <th class="text-center"> 
         Action 
        </th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td> 
        1 
        </td> 
        <td> 
        <input type="text" name='name0' placeholder='Start Range' class="form-control"/> 
        </td> 
        <td> 
         <input type="text" name='mail0' placeholder='End Range' class="form-control"/> 
        </td> 
        <td> 
         <input type="text" name='mobile0' placeholder='Value' class="form-control"/> 
        </td> 
        <td> 
         <button type="button" class="delete">Delete</button> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div>