Javascript遍历表格表单生成选中行对象，附实现代码求优化

可优化点汇总 #

• 冗余遍历问题：原代码会遍历表头行<tr>，这类行没有任何输入元素，属于无效遍历，直接指定遍历tbody内的业务行即可
• 变量作用域问题：users数组定义在点击事件外部，多次点击按钮会累计历史数据，应该放在事件回调内部每次生成新数组
• 事件对象兼容问题：原代码直接使用全局event，部分浏览器不支持，需要在回调参数中显式接收事件对象
• 逻辑优先级问题：原代码会先遍历当前行所有输入框赋值，再判断复选框是否勾选，未勾选的行做了无效遍历，应该先判断复选框状态，未勾选直接跳过整行
• 性能简化：原生DOM属性可以直接读取，不需要转jQuery对象调用，比如this.name、this.checked、this.value比$(this).attr()/prop()/val()性能更好，也更简洁
• 冗余判断移除：$(this).prop("checked") == true可以直接简化为this.checked，本身就是布尔值不需要额外比较

优化后代码 #

JS部分

$("#btn").on("click", function (e) {
  // 显式接收事件对象，阻止默认行为
  e.preventDefault();
  // 每次点击生成新数组，避免数据累计
  const users = [];

  // 直接选中tbody内的业务行，跳过表头
  $(".table tbody .the_row").each(function () {
    // 先判断当前行复选框是否勾选，未勾选直接跳过
    const $checkbox = $(this).find('input[name="checkbox"]');
    if (!$checkbox.prop("checked")) return;

    const user = {};
    // 只遍历勾选行的输入框
    $(this).find("input").each(function () {
      if (this.name === "checkbox") {
        user[this.name] = this.checked;
      } else {
        user[this.name] = this.value;
      }
    });

    // 可选：如果需要把行内非输入框的姓名、成绩也加入对象，可以加以下两行
    // user.firstName = $(this).find('td').eq(2).text();
    // user.grade = $(this).find('td').eq(3).text();

    users.push(user);
  });

  console.log(users);
});

可选HTML优化（非必须）

可以给复选框加专属类名，避免后续修改name属性时JS逻辑失效：

<td><input type="checkbox" class="row-select-checkbox" name="checkbox"/></td>

JS里选中复选框的逻辑就可以改成$(this).find('.row-select-checkbox')，更健壮。

内容的提问来源于stack exchange，提问作者Simplyrdy