jQuery循环中动态表格数据访问与比较教程

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>数据1</th>
      <th>数据2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="identifier">1</td>
      <td class="c1"><input type="number" name="data1" data-id="123" value="123" /></td>
      <td class="c2"><input type="number" name="data2" data-id="456" value="456" /></td>
    </tr>
    <tr>
      <td class="identifier">2</td>
      <td class="c1"><input type="number" name="data1" data-id="321" value="321" /></td>
      <td class="c2"><input type="number" name="data2" data-id="654" value="654" /></td>
    </tr>
  </tbody>
</table>
<p>更新值以查看何时需要保存某一行。</p>

// 为所有输入框设置一个 keyup 监听器，每次输入框内容改变时运行 .each() 函数
$('input').keyup(function() {
  console.clear(); // 清除控制台，方便查看每次更新

  // 遍历 tbody 中的所有 tr 元素，排除表头
  $('tbody tr').each(function(index, element) {
    // 使用 .find() 方法查找嵌套元素
    // .find() 与 .children() 的区别在于 .children() 只查找直接子级，
    // 而 .find() 会遍历所有后代元素。
    var idToSave = $(element).find('.identifier').first().text();
    var c1 = $(element).find('td.c1 input[type=number]').first();
    var c2 = $(element).find('td.c2 input[type=number]').first();

    // 检查是否有值需要保存（使用 .data() 获取 'data-id' 属性值并转换为字符串进行比较）
    // .data() 首次获取时可能会返回数字类型，因此需要与空字符串拼接转换为字符串。
    var toSave = (c1.val() !== c1.data("id") + '') || (c2.val() !== c2.data('id') + '');

    if (toSave) {
      // 构造需要保存的查询字符串参数
      // 注意：为了构建查询字符串，我们为 input 元素添加了 'name' 属性
      const rowSerialized = $(element).find('input').filter(function() {
        // 只包含值已更新的字段
        const isChanged = ($(this).data('id') + '') !== $(this).val();
        return isChanged;
      }).serialize();

      // 可选：从序列化字符串构建一个差异对象
      const rowDiffsObject = parseSerializedRow(rowSerialized);

      console.log("正在保存行 ID: ", idToSave, "\n差异对象: ", rowDiffsObject);

      // 仅用于示例：通过更新 data-id 来模拟保存，表示当前值已是最新
      c1.data('id', c1.val());
      c2.data('id', c2.val());
    }
  });
});

// 辅助函数：将序列化字符串转换为差异对象
function parseSerializedRow(rowSerialized) {
  let rowDiffs = {};
  rowSerialized.split('&').forEach((field) => {
    const split = field.split('=');
    const fieldName = decodeURIComponent(split[0]); // 解码URL编码的字段名
    const fieldValue = decodeURIComponent(split[1]); // 解码URL编码的字段值
    rowDiffs[fieldName] = fieldValue;
  });
  return rowDiffs;
}