我如何在 HTML 表中使用 jQuery \"each()\"？答案

【问题标题】：How I use jQuery "each()" inside HTML table?我如何在 HTML 表中使用 jQuery \"each()\"？
【发布时间】：2022-11-10 18:31:01
【问题描述】：

查看下面的 HTML 表格：

$(document).on('change', '[name="item_inline"]', funciton(e) {
  var $this = $(this);
  var $inp = $this.closest('tr').find('[name="rtn_qty[item_id]"]');
  var qty = $this.closest('tr').find('.qty').text();
  $inp.val(qty);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td><input type="checkbox" name="select_all" id="select_all" value="1"></td>
      <td>Item Name</td>
      <td>Qty</td>
      <td>Return Qty</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="item_inline" value="1"></td>
      <td>Name 01</td>
      <td class="qty">150</td>
      <td><input type="text" name="rtn_qty[item_id]" value="">
    </tr>

    <tr>
      <td><input type="checkbox" name="item_inline" value="1"></td>
      <td>Name 02</td>
      <td class="qty">250</td>
      <td><input type="text" name="rtn_qty[item_id]" value="">
    </tr>

    <tr>
      <td><input type="checkbox" name="item_inline" value="1"></td>
      <td>Name 03</td>
      <td class="qty">350</td>
      <td><input type="text" name="rtn_qty[item_id]" value="">
    </tr>
  </tbody>
</table>

使用这个表，假设我选中了select_all 复选框，那么我需要用 qty 列的值填充 Return Qty 列下的所有输入。根据上表输入值应为 (150,250,350)。另一件事是，如果我点击tr 内的复选框，那么该行的input 应该填写同一行的数量值。

我尝试了与each 循环类似的select_all 复选框，但我混淆了我如何使用each。

希望有人可以帮助我。

【问题讨论】：

“这是我目前拥有的代码”- 那部分有一个错字：funciton
恕我直言：如果您正在使用事件委托，则将事件附加到最近的父级上。在这种情况下，这将是<table>（或<tbody>）而不是document。
为什么要使用.each()？ .val() 可以设置集合中所有元素的值。在select_all 的情况下，将DOM 向上移动到<table>，找到所有rtn_qty[item_id] 元素并使用.val() 设置它们的值
@Andreas 我个人把全部$(document) 上的事件处理程序，这样功能就完全独立于页面上的实际内容。然而，这只是我。
@Pointy 是的，那应该是恕我直言……将其添加到评论中

标签： javascript jquery each

【解决方案1】：

一种解决方案（在 tr 上使用 each）是重用您所拥有的：

第 1 步：将处理程序转换为函数，以便可以重用。传入tr 作为参数：

function selectRow(tr) {
  var inp = tr.find('[name="rtn_qty[item_id]"]');
  var qty = tr.find('.qty').text();
  inp.val(qty);
}

第 2 步：更改您的处理程序以使用函数（并对其进行测试）

$(document).on('change', '[name="item_inline"]', function(e){
  selectRow($(this).closest("tr"))
})

第 3 步：在“全部”更改中，获取所有行，然后将每一行传递给您的函数：

$("#select_all").change(function() {
  var rows = $(this).closest("table").find("tbody tr");
  rows.each((i, tr) => selectRow($(tr)))
});

放在一起：

$(document).on('change', '[name="item_inline"]', function(e) {
  selectRow($(this).closest("tr"))
})

$("#select_all").change(function() {
  var rows = $(this).closest("table").find("tbody tr");
  rows.each((i, tr) => selectRow($(tr)))
});

function selectRow(tr) {
  var inp = tr.find('[name="rtn_qty[item_id]"]');
  var qty = tr.find('.qty').text();
  inp.val(qty);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td><input type="checkbox" name="select_all" id="select_all" value="1"></td>
      <td>Item Name</td>
      <td>Qty</td>
      <td>Return Qty</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="item_inline" value="1"></td>
      <td>Name 01</td>
      <td class="qty">150</td>
      <td><input type="text" name="rtn_qty[item_id]" value="">
    </tr>

    <tr>
      <td><input type="checkbox" name="item_inline" value="1"></td>
      <td>Name 02</td>
      <td class="qty">250</td>
      <td><input type="text" name="rtn_qty[item_id]" value="">
    </tr>

    <tr>
      <td><input type="checkbox" name="item_inline" value="1"></td>
      <td>Name 03</td>
      <td class="qty">350</td>
      <td><input type="text" name="rtn_qty[item_id]" value="">
    </tr>
  </tbody>
</table>

通过一些小的改动，我们可以让它更加用户友好

$(document).on('change', '[name="item_inline"]', function(e) {
  selectRow($(this).closest("tr"), $(this).is(":checked"))
  if (!$(this).is(":checked"))
    $("#select_all").prop("checked", false);
})

$("#select_all").change(function() {
  var rows = $(this).closest("table").find("tbody tr");
  var isChecked = $(this).is(":checked");
  rows.each((i, tr) => {
    selectRow($(tr), isChecked);
    $(tr).find(":checkbox").prop("checked", isChecked);
  });
});

function selectRow(tr, checked) {
  var inp = tr.find('[name="rtn_qty[item_id]"]');
  var qty = checked ? tr.find('.qty').text() : "";
  inp.val(qty);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td><input type="checkbox" name="select_all" id="select_all" value="1"></td>
      <td>Item Name</td>
      <td>Qty</td>
      <td>Return Qty</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="item_inline" value="1"></td>
      <td>Name 01</td>
      <td class="qty">150</td>
      <td><input type="text" name="rtn_qty[item_id]" value="">
    </tr>

    <tr>
      <td><input type="checkbox" name="item_inline" value="1"></td>
      <td>Name 02</td>
      <td class="qty">250</td>
      <td><input type="text" name="rtn_qty[item_id]" value="">
    </tr>

    <tr>
      <td><input type="checkbox" name="item_inline" value="1"></td>
      <td>Name 03</td>
      <td class="qty">350</td>
      <td><input type="text" name="rtn_qty[item_id]" value="">
    </tr>
  </tbody>
</table>

【讨论】：