jQuery动态表格数据管理：循环遍历、值比较与更新策略

// 错误示例：无法找到嵌套在td中的input
// var $cone = $(element).children('td.pup input[type=number]').first();

// 正确示例：使用.find()查找所有后代元素
var c1 = $(element).find('td.c1 input[type=number]').first();
var c2 = $(element).find('td.c2 input[type=number]').first();

// 获取data-id并转换为字符串进行比较
// var initialValue = $cone.data("id") + '';
// if ($cone.val() !== initialValue) { /* ... */ }

<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 事件监听器，以便实时检测变更
$('input').keyup(function() {
  console.clear(); // 清空控制台，方便查看最新输出

  // 遍历 tbody 中的每一行 (tr)，排除表头行
  $('tbody tr').each(function(index, element) {
    // 使用 .find() 查找嵌套元素，获取行标识符和两个输入框
    var idToSave = $(element).find('.identifier').first().text();
    var $inputC1 = $(element).find('td.c1 input[type=number]').first();
    var $inputC2 = $(element).find('td.c2 input[type=number]').first();

    // 检查是否有值需要保存：比较当前值与data-id，并将data-id转换为字符串
    var needsToSave = $inputC1.val() !== ($inputC1.data("id") + '') || 
                      $inputC2.val() !== ($inputC2.data('id') + '');

    if (needsToSave) {
      // 如果有变更，则构建需要保存的数据
      // 筛选出所有有变更的输入框，并序列化它们
      const rowSerialized = $(element).find('input').filter(function() {
        // 确保比较时data-id转换为字符串
        return ($(this).data('id') + '') !== $(this).val();
      }).serialize();

      // 将序列化的字符串转换为一个对象，方便后端处理
      const rowDiffsObject = parseSerializedRow(rowSerialized);

      console.log("需要保存的行ID: ", idToSave, "\n变更数据对象: ", rowDiffsObject);

      // 实际应用中，这里会发起Ajax请求将 rowDiffsObject 发送到服务器
      // 例如：$.ajax({ url: '/save-data', method: 'POST', data: { id: idToSave, ...rowDiffsObject } });

      // 示例：模拟保存成功后更新 data-id，表示当前值已是最新初始值
      $inputC1.data('id', $inputC1.val());
      $inputC2.data('id', $inputC2.val());
    }
  });
});

/**
 * 辅助函数：将序列化的查询字符串转换为JavaScript对象
 * @param {string} serializedString 序列化字符串，如 "name1=value1&name2=value2"
 * @returns {object} 包含字段名和值的对象
 */
function parseSerializedRow(serializedString) {
  let diffs = {};
  serializedString.split('&').forEach((field) => {
    const split = field.split('=');
    if (split.length === 2) {
      const fieldName = decodeURIComponent(split[0]); // 解码字段名
      const fieldValue = decodeURIComponent(split[1]); // 解码字段值
      diffs[fieldName] = fieldValue;
    }
  });
  return diffs;
}