读取来自tr的数据，其中id在tbody内

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

将类应用于您的所有字段，然后使用each这样的jquery函数进行访问

  <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

Answer 2

类似的东西：

＆＃13;

＆＃13;

       document.addEventListener("DOMContentLoaded", function (event) {
            var _rows = document.querySelectorAll('table tr');                
        //depending on your markup you could use also: 
        // var _rows = document.querySelectorAll('tr');
        // var _rows = document.querySelectorAll('tbody tr');
       //or THE WORST CASE if you cannot really change your html:
       //document.querySelectorAll('tbody[id*="tbody"] tr');
            _rows.forEach(function (row) {
                var _bacthNo = row.querySelector('#bacthNo');
                var _location  = row.querySelector('#location');
                var _qty  = row.querySelector('#qty');

                console.log(_bacthNo.value)
                console.log(_location.value)
                console.log(_qty.value)
            });
        });

＆＃13;

 <table>

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

    </table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

$('#tblOne > tbody  > tr').each(function() {
alert($(this).find("td:first>input").val());
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblOne">
<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>
</table>

＆＃13;

＆＃13;

＆＃13;