像下面这样的jquery是在哪一步实现数据的双向绑定的呢？

Question

新接手一个非常老的项目，还是用jquery写的，由于对jquery接触有限，啃得非常吃力。

<div id="DataBox" data-excludetable="tableData"></div>

HTML里是这样一行代码，在接口获取数据tableData: [{name: 'XXX', M1: 10, M2: 10, total: 20 }]后会在这里填充类似如下表格

名称	1月	2月	合计
XXX	10	10	20

其中数量列点击可以变成input进行修改
现在后台对数据进行了修改，将数据来源细分，扩展成了tableData: [{name: 'XXX', part1_M1: 4, part2_M1: 6, M1: 10, part1_M2: 5, part2_M2: 5, M2: 10, total: 20 }]
表格也修改如下，其中来源1/2的月份数据可以进行修改

名称	来源	1月	2月	合计
XXX	来源1	4	5
XXX	来源2	6	5
XXX	合计	10	10	20

下面是原来的部分相关代码

// 从接口获取到数据
$("[data-excludetable=tableData]").data("tableData",JSON.stringify(tableData))

// 表单提交的数据
const submitData = $("[data-excludetable=tableData]").data("tableData")

我的理解是这里类似sessionStorage 这样通过tableData这个key对表格数据进行读写。但是很神奇的是数据像是进行双向绑定了一样，输入框填写完毕后提交数据tableData对应的值会随input的value进行同步更改，并且我在input的onblur()中也没看到对tableData进行更新。
在我以为这是jquery的双向绑定特性按新需求修改代码后，问题出现在我修改了来源1行的1月(或2月)后，期望更新的是part1_M1(或part2_M1)，但是提交修改时通过$("[data-excludetable=tableData]").data("tableData")拿到的对象实际改变的却是M1(M2)的值。而在修改第二行后tableData数据没有进行任何更新。同样地第三行的合计不允许输入修改，但是在前两行修改后会自动计算进行更新，但是这里显然并没有能和M1、M2绑定上。
修改后看起来的结果像是jquery只将对应的某行某列与某个字段相关联了，我想知道jquery的这种$("[data-excludetable=xxx]").data()是在哪一步进行的.
下面是生成表格的代码，我也不觉得是在这里实现的。

let tableHtml = `<table class="table">
                      <thead>
                            <tr>
                              <th>名称</th>
                              <th>来源</th>
                              <th>1月</th>
                              <th>2月</th>
                              <th>合计</th>
                            </tr>
                      </thead>
                      <tbody>`
for(var i in tableData) {
    parentHtml+=`<tr data-index="${i}" data-name="${tableData[i].name}">
                      <td rowspan="3">${tableData[i].departmentName}</td>
                      <td>来源1</td>
                      <td data-month="1">${tableData[i].part1_M1}</td>
                      <td data-month="2">${tableData[i].part1_M2}</td>
                  </tr>
                  <tr data-index="${i}" data-name="${tableData[i].name}">
                      <td>来源2</td>
                      <td data-month="1">${tableData[i].part2_M1}</td>
                      <td data-month="2">${tableData[i].part2_M2}</td>`
    parentHtml += `<tr>
                        <td>合计</td>
                        <td data-combined="1"><span>${tableData[i].M1}</span></td>
                        <td data-combined="2"><span>${tableData[i].M2}</span></td>
                        <td><span></span></td>
                    </tr> `
}
    parentHtml +=</tbody></table>

请教一下应该在哪里对症下药，感谢！

Answer 1

表格点击时候设置一下断点
表格input失去焦点时候设置一下断点，
data-excludetable搜一下这个相关的代码

function updateCellData($cell, newValue) {
  const $row = $cell.closest('tr');
  const index = $row.data('index');
  const month = $cell.data('month');
  
  let tableData = JSON.parse($("[data-excludetable=tableData]").data("tableData"));
  
  if ($row.find('td:first').text() === '来源1') {
    tableData[index][`part1_M${month}`] = parseFloat(newValue);
    // 更新合计
    tableData[index][`M${month}`] = tableData[index][`part1_M${month}`] + tableData[index][`part2_M${month}`];
  } else if ($row.find('td:first').text() === '来源2') {
    tableData[index][`part2_M${month}`] = parseFloat(newValue);
    // 更新合计
    tableData[index][`M${month}`] = tableData[index][`part1_M${month}`] + tableData[index][`part2_M${month}`];
  }
  
  // 更新总计
  tableData[index].total = tableData[index].M1 + tableData[index].M2;
  
  // 保存回数据存储
  $("[data-excludetable=tableData]").data("tableData", JSON.stringify(tableData));
  
  // 更新显示
  updateDisplayedValues(index);
}