如何让table2新增行后刷新不恢复为table1行数（SQL Server存储）

架构老林

2026-7-19

问题分析

当前代码的核心问题是页面初始化table2时，完全依赖table1的行数生成行，没有读取数据库中已保存的table2数据。哪怕数据库里已经存了4行，刷新页面后前端还是会重新根据table1的3行生成，导致行数回退。

解决方案

要解决这个问题，需要把前端初始化逻辑从「依赖table1行数」改成「优先从数据库加载已保存的table2数据」，具体步骤如下：

1. 后端提供数据接口

首先需要后端写一个接口（比如/api/get-table2-data），查询SQL Server中table2的所有记录，返回JSON格式的数据，结构示例：

[
  {
    "item": "1",
    "quantity": "4",
    "exitQty": "2",
    "balanceQty": "2",
    "guard": "张三",
    "datetime": "2024-05-20T14:30"
  },
  {
    "item": "1",
    "quantity": "2",
    "exitQty": "2",
    "balanceQty": "0",
    "guard": "李四",
    "datetime": "2024-05-20T15:00"
  }
]

2. 修改前端初始化逻辑

替换原有的table2初始化代码，改为先请求后端数据再渲染行：

var add = 0;
const appendRows = (data = null) => {
  // 根据传入的数据生成行并填充值
  var newRow = `<tr class="table-row" data-table="">
<td class="p-0 " style="width:auto;">
<input type="text" name="strCol_01[]" id="strCol01[${add}]" value="${data ? data.item : ''}" data-ref="ctrl_item" class="px-1 form-control-sm form-control-plaintext text-muted item-action-listener" placeholder="" data-column="ctrl_Table3Column_ft3p0" title="Items" Readonly >
</td>
<td class="p-0 " style="width:auto;">
<input type="number" name="strCol_02[]" id="strCol02[${add}]" value="${data ? data.quantity : ''}" data-ref="ctrl_quantity" class="px-1 form-control-sm form-control-plaintext text-muted item-action-listener" placeholder="" data-column="ctrl_Table3Column_evxcq" title="Quantity" Readonly>
</td>
<td class="p-0 " style="width:auto;">
<input type="number" name="strCol_03[]" id="strCol03[${add}]" value="${data ? data.exitQty : ''}" class="px-1 form-control-sm form-control-plaintext item-action-listener" placeholder="" data-column="ctrl_Table3Column_9zd2j" title="Exit Item Qty" required="">
</td>
<td class="p-0 " style="width:auto;">
<input type="number" name="strCol_04[]" id="strCol04[${add}]" value="${data ? data.balanceQty : ''}" class="px-1 form-control-sm form-control-plaintext item-action-listener " placeholder="" data-column="ctrl_Table3Column_0opcc" title="Balance Qty" readonly="" required="">
</td>
<td class="p-0 " style="width:null;">
<input type="text" name="strCol_05[]" id="strCol05[${add}]" value="${data ? data.guard : ''}" class="px-1 form-control-sm form-control-plaintext item-action-listener" placeholder="" data-column="ctrl_Table3Column_zmlc9" title="Guard On Duty" required="">
</td>
<td class="p-0 " style="width:null;">
<input type="datetime-local" name="strCol_06[]" id="strCol06[${add}]" value="${data ? data.datetime : ''}" class="px-1 form-control-sm form-control-plaintext item-action-listener" placeholder="" data-column="ctrl_Table3Column_8fa36" title="Date and Time" required="">
</td>
</tr>`;

  $('#table2 tbody').append(newRow);
  add++;
};

// 页面加载时优先拉取后端数据
$.get('/api/get-table2-data', function(response) {
  if (response.length > 0) {
    // 渲染所有已保存的行
    response.forEach(item => {
      appendRows(item);
    });
  } else {
    // 无数据时，根据table1生成初始行
    var rowCount = $('#Table_1 tbody tr').length;
    for (let i = 0; i < rowCount; i++) {
      const table1Row = $('#Table_1 tbody tr').eq(i);
      const initData = {
        item: table1Row.find('input[name="ctrl_item"]').val(),
        quantity: table1Row.find('input[name="ctrl_quantity"]').val()
      };
      appendRows(initData);
    }
  }
});

// 保留原有的输入计算逻辑
$(document).on('input', '#table2', function() {
  $('#table2 tbody tr').each(function() {
    const rows2 = $(this);
    var Qty = rows2.find('input[data-column="ctrl_Table3Column_evxcq"]');
    var Exit = rows2.find('input[data-column="ctrl_Table3Column_9zd2j"]');
    var Balance = rows2.find('input[data-column="ctrl_Table3Column_0opcc"]');
    var Remaining = parseFloat(Qty.val()) - parseFloat(Exit.val());

    if (Exit.val() > Qty.val()) {
      Exit.val(Qty.val())
      Remaining = Qty.val() - Exit.val()
    }

    Balance.val(Remaining)
    Exit.attr('max', Remaining);
  });
});

// 保留原有的新增行逻辑
$(document).on('change', 'input[data-column="ctrl_Table3Column_8fa36"]', function() {
  var parentTr = $(this).closest('tr');
  var difval = parentTr.find('input[data-column="ctrl_Table3Column_0opcc"]').val();

  if (difval > 0) {
    var copy = parentTr.clone().insertAfter(parentTr);
    copy.find('input[data-column="ctrl_Table3Column_9zd2j"],input[data-column="ctrl_Table3Column_zmlc9"],input[data-column="ctrl_Table3Column_8fa36"]').val('');
    copy.find('input[data-column="ctrl_Table3Column_evxcq"]').val(difval);
    parentTr.find('input').prop('disabled', true).css('background', 'lightgreen');
  }
  parentTr.find('input').prop('disabled', true).css('background', 'lightgreen');
});

3. 表单提交的后端处理

表单提交时，后端需要接收strCol_01[]、strCol_02[]等数组参数，遍历数组将每一行数据插入或更新到SQL Server中，确保所有行数据都能被持久化。

关键说明

移除了原代码中无效的itemId = $(this).attr('data-item-id')逻辑，因为appendRows函数内的this指向不符合预期。
初始化优先级：先加载数据库已存数据，无数据时再基于table1生成初始行，兼顾首次加载和后续刷新的正确性。

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