如何将<td>值按数值递增复制到后续<td>单元格

当然可以实现这个需求！我们需要解决几个核心问题：提取文本前缀与数字部分、实现数值递增逻辑、正确遍历后续单元格，同时修复现有代码里的一些小问题（比如过时的bind方法、不够精准的事件判断）。

核心思路拆解 #

• 首先，我们需要把输入的内容拆分成「非数字前缀」和「数字后缀」两部分，比如EK123拆成EK和123，110拆成''和110。
• 对数字后缀进行加1操作，再和前缀拼接成新值。
• 找到当前单元格所在的行，遍历后续所有行的对应列单元格，依次填充递增后的值。

完整实现代码 #

HTML（你的表格结构，已做小修正）

<table id="sendMailTable">
  <thead>
    <tr>
      <th scope="col" style="width: 75px; text-align: center;">Table ID</th>
      <th scope="col" style="width: 100px;">Dated</th>
      <th scope="col" style="width: 140px;">RL/Tkt No</th>
    </tr>
  </thead>
  <tbody name="tblBody" id="tblBody">
    <tr>
      <td style="width: 75px; text-align: center;">1</td>
      <td style="text-align: center; vertical-align:middle;">04/12/2017</td>
      <td tabindex="1" class="rlNum" contenteditable="true"></td>
    </tr>
    <tr>
      <td style="width: 75px; text-align: center;">2</td>
      <td style="text-align: center; vertical-align:middle;">04/12/2017</td>
      <td tabindex="1" class="rlNum" contenteditable="true"></td>
    </tr>
    <tr>
      <td style="width: 75px; text-align: center;">3</td>
      <td style="text-align: center; vertical-align:middle;">04/12/2017</td>
      <td tabindex="1" class="rlNum" contenteditable="true"></td>
    </tr>
    <tr>
      <td style="width: 75px; text-align: center;">4</td>
      <td style="text-align: center; vertical-align:middle;">04/12/2017</td>
      <td tabindex="1" class="rlNum" contenteditable="true"></td>
    </tr>
    <tr>
      <td style="width: 75px; text-align: center;">5</td>
      <td style="text-align: center; vertical-align:middle;">04/12/2017</td>
      <td tabindex="1" class="rlNum" contenteditable="true"></td>
    </tr>
  </tbody>
</table>

小修正说明：给最后一列的<td>统一加上了rlNum类方便定位，同时把style="contenteditable=true"修正为标准的contenteditable="true"属性。

JavaScript（jQuery版本）

$(document).ready(function() {
  // 用事件委托绑定input事件，兼容AJAX生成的动态表格
  $('#tblBody').on('input', '.rlNum', function() {
    const currentCell = $(this);
    const currentValue = currentCell.text().trim();
    if (!currentValue) return; // 空值不触发递增逻辑

    // 拆分前缀（非数字开头部分）和数字后缀
    const prefixMatch = currentValue.match(/^\D+/);
    const prefix = prefixMatch ? prefixMatch[0] : '';
    const numberMatch = currentValue.match(/\d+$/);
    if (!numberMatch) return; // 没有数字后缀，不执行递增

    let currentNumber = parseInt(numberMatch[0], 10);
    const currentRowIndex = currentCell.closest('tr').index();
    const allRows = $('#tblBody tr');

    // 遍历当前行之后的所有行，填充递增后的值
    for (let i = currentRowIndex + 1; i < allRows.length; i++) {
      currentNumber++;
      const nextCell = $(allRows[i]).find('.rlNum');
      nextCell.text(`${prefix}${currentNumber}`);
    }
  });
});

代码细节说明 #

1. 事件处理优化：使用input事件代替keyup，能覆盖粘贴、拖拽等多种输入场景；同时用事件委托绑定在表格tbody上，确保AJAX动态生成的行也能响应事件。
2. 内容拆分逻辑：通过正则表达式精准拆分前缀和数字部分，兼容纯数字、前缀+数字的输入格式。
3. 遍历逻辑：通过closest('tr').index()获取当前行的索引，从下一行开始依次填充递增后的值，确保只处理当前聚焦单元格之后的后续单元格。

测试场景验证 #

• 输入EK123，后续单元格会依次填充EK124、EK125...
• 输入110，后续单元格会依次填充111、112...
• 如果输入内容没有数字后缀（比如纯字母），则不会触发递增逻辑，符合需求中「仅允许输入数值或字母数字值」的限制。

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