如何将数据库表ID添加到表格行的class/ID？现有代码是否可行？

现有代码是否可行？ #

现有代码完全不可行，核心问题有两个：

1. $("tr").addClass(item.id)这行代码会给页面中所有<tr>元素都添加当前循环项的item.id作为类，导致所有行的类被反复覆盖，完全达不到给对应行绑定数据库ID的目的。
2. 新创建的<tr>元素并没有绑定任何和item.id相关的标识，后续根本无法通过ID定位到目标行。

正确实现方案 #

1. 给动态生成的表格行绑定数据库ID #

创建<tr>时直接把item.id作为行的id属性（注意ID命名要符合HTML规范，建议加前缀避免纯数字ID的兼容性问题）：

$.each(response.sellorderbookdata, function(key, item) {
  if (item.total !== 0) {
    // 给tr添加带前缀的唯一ID
    const $tr = $(`<tr id="order-row-${item.id}">
      <td class="red-bg-100">${item.price}</td>
      <td class="pink-bg-90">${item.amount}</td>
      <td class="white-bg-70">${item.total}</td>
    </tr>`);
    $('tbody.sellbook').append($tr);
  }
});

如果想用类绑定，可写成class="order-row order-row-${item.id}"，但用ID更适合唯一标识单行。

2. 每次获取数据时更新表格 #

根据更新需求选择两种逻辑：

替换全部数据（清空后重新渲染）

// 先清空tbody原有内容
$('tbody.sellbook').empty();
// 循环添加新数据
$.each(response.sellorderbookdata, function(key, item) {
  if (item.total !== 0) {
    const $tr = $(`<tr id="order-row-${item.id}">
      <td class="red-bg-100">${item.price}</td>
      <td class="pink-bg-90">${item.amount}</td>
      <td class="white-bg-70">${item.total}</td>
    </tr>`);
    $('tbody.sellbook').append($tr);
  }
});

增量更新（存在则修改，不存在则新增）

$.each(response.sellorderbookdata, function(key, item) {
  if (item.total !== 0) {
    const rowId = `order-row-${item.id}`;
    const $existingRow = $(`#${rowId}`);
    if ($existingRow.length > 0) {
      // 行已存在，直接更新单元格内容
      $existingRow.find('.red-bg-100').text(item.price);
      $existingRow.find('.pink-bg-90').text(item.amount);
      $existingRow.find('.white-bg-70').text(item.total);
    } else {
      // 行不存在，新增行
      const $tr = $(`<tr id="${rowId}">
        <td class="red-bg-100">${item.price}</td>
        <td class="pink-bg-90">${item.amount}</td>
        <td class="white-bg-70">${item.total}</td>
      </tr>`);
      $('tbody.sellbook').append($tr);
    }
  }
});

3. 通过表格行定位修改单元格文本 #

基于绑定的唯一ID，可通过两种方式修改单元格内容：

方式1：通过单元格类定位

// 修改ID为123的行的价格和数量
const targetRowId = '#order-row-123';
$(targetRowId).find('.red-bg-100').text('新价格');
$(targetRowId).find('.pink-bg-90').text('新数量');

方式2：通过单元格索引定位

// 按td顺序索引修改（0=价格，1=数量，2=总计）
$(targetRowId).find('td').eq(0).text('新价格');
$(targetRowId).find('td').eq(1).text('新数量');

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