javascript - 使用 tbody 内的 id 从 tr 读取数据

Question

我正在尝试从“td”内的输入字段读取数据，并在“tbody”内使用ID

html结构是这样的:

    <tbody id="tbody1">
   <tr>
      <td>
         <input type="text" id="bacthNo" class="form-control md-has-value" required="">
      </td>
      <td>
         <input type="text" id="location" class="form-control md-has-value" required="">
      </td>
      <td>
         <input type="text" id="qty" class="form-control md-has-value" required="">
      </td>      
   </tr>
   <tr>
      <td>
      <input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
      </td>
      <td>
          <input type="text" id="location" class="form-control md-has-value" required="" value="0">
      </td>
      <td>
      <input type="text" id="qty" class="form-control md-has-value" required="" value="0">
      </td>
   </tr>  
</tbody>
<tbody id="tbody2">
   <tr>
      <td>
         <input type="text" id="bacthNo" class="form-control md-has-value" required="">
      </td>
      <td>
         <input type="text" id="location" class="form-control md-has-value" required="">
      </td>
      <td>
         <input type="text" id="qty" class="form-control md-has-value" required="">
      </td>      
   </tr>
   <tr>
      <td>
      <input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
      </td>
      <td>
          <input type="text" id="location" class="form-control md-has-value" required="" value="0">
      </td>
      <td>
      <input type="text" id="qty" class="form-control md-has-value" required="" value="0">
      </td>
   </tr>  
</tbody>

这里“tbody”id 动态变化，每个“tbody”的 tr 可以在 1 到 10 之间。

我想要的是读取每个 tbody 的“bacthNo”、“location”和“qty”的所有数据，并在表单提交时将其插入数组中。我尝试了多种方法，但无法从这个复杂的表单中获取数据。

请帮忙。

Answer 1

将类应用于所有字段，然后使用 jquery 的 each 函数进行访问，如下所示

  <tr>
  <td>
     <input type="text" id="bacthNo" class="bacthNo form-control md-has-value" required="">
  </td>
  <td>
     <input type="text" id="location" class="location form-control md-has-value" required="">
  </td>
  <td>
     <input type="text" id="qty" class="qty form-control md-has-value" required="">
  </td>      

 $('#tbody1').find('tr').each(function () {
             var eachtr = $(this);
            eachtr.find('.bacthNo').val();
            eachtr.find('.location').val();
            eachtr.find('.qty').val();
           //get your all fields
}

例如，请参阅此 jsfiddle