如何使用 jQuery 遍历表格行并获取单元格值

Question

我正在使用 jQuery 动态创建下表…执行我的代码后，我得到如下表：

 <table id="TableView" width="800" style="margin-left: 60px">
<tbody>
 <tr>
 <th>Module</th>
 <th>Message</th>
</tr>
<tr class="item">
 <td> car</td>
 <td>
  <input class="name" type="text">
 </td>
 <td>
<input class="id" type="hidden" value="5">
</td>
   </tr>
<tr class="item">
 <td> bus</td>
 <td>
  <input class="name" type="text">
 </td>
 <td>
<input class="id" type="hidden" value="9">
</td>
  </tr>

我曾经像这样迭代表：

  $("tr.item").each(function() {
            var quantity1 = $this.find("input.name").val();
        var quantity2 = $this.find("input.id").val();

            });

通过使用上面的查询，我只得到第一行单元格的值…帮助我使用 jQuery，它将遍历表的整行并获取 quantity1 和 quantity2 中的行单元格值 --- 。

原文由 Brittas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

$(this) 而不是 $this

 $("tr.item").each(function() {
        var quantity1 = $(this).find("input.name").val(),
            quantity2 = $(this).find("input.id").val();
});

证明_1

证明_2

原文由 thecodeparadox 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

通过使用 JQuery 和 DOM 逻辑为每一行循环遍历表并读取第一列值。

 var i = 0;
var t = document.getElementById('flex1');

$("#flex1 tr").each(function() {
    var val1 = $(t.rows[i].cells[0]).text();
    alert(val1) ;
    i++;
});

原文由 smac2020 发布，翻译遵循 CC BY-SA 3.0 许可协议