从 tr 读取数据，并在 tbody 内使用 id答案

【问题标题】：Reading data from tr with an id inside the tbody从 tr 读取数据，并在 tbody 内使用 id
【发布时间】：2017-12-26 05:29:18
【问题描述】：

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

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”的所有数据，并在表单提交时推入一个数组。我尝试了几种方法，但无法从这种复杂的表单中获取数据。

请帮助。

【问题讨论】：

不要将id 用于<tbody>。只需为每个 tbody 使用相同的类，然后使用 .each 并获取所有内容。（通过id也可以，但是代码有点复杂）
你能给我同样的代码示例吗？这对我有帮助

标签： javascript jquery html css frontend

【解决方案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

【讨论】：

感谢您的回复。但是 tbody 也会动态变化。如何在一次迭代中从所有 tbody 中读取数据？
然后将类应用到所有 tbody 并使表中的所有 tbody 变得有趣 $('#yourtableid').find('.tbodyclass').each(function () {});像这样

【解决方案2】：

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

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

【讨论】：

如果你不想在 table 中有 id 那么只需使用选择器 "table > tbody > tr"
你可以使用 class 属性并选择它，否则使用 nth-child 选择器 alert("batch "+$(this).find("td:first>input").val()) ; alert("位置 "+$(this).find("td:nth-child(2)>input").val()); alert("数量"+$(this).find("td:nth-child(3)>input").val());

【解决方案3】：

类似这样的：

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

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

【讨论】：