表格中.each循环内input的charAt方法失效问题排查与解决

你遇到的核心问题是重复使用ID导致批量处理失效——ID在HTML中必须唯一，getElementById只会返回第一个匹配的元素，所以你的循环每次都在操作第一个输入框，其他输入根本没被处理。不用each时只处理单个元素，所以看起来正常，但无法批量操作。

解决方案 #

1. 移除HTML中重复的id="nameSort"，仅保留class="sortme"作为选择器；
2. 在jQuery的each循环中，用$(this)指代当前遍历的输入框，实现逐个处理；
3. 提取首字符后插入到当前输入框前方，达到预期显示效果；
4. 可选：给首字符添加专属容器，方便后续实现排序逻辑。

修正后的完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <tr><th>Name</th></tr>
  <tr>
    <td>
     <input class="sortme" value="Doom, Doctor">
    </td>
  </tr>
  <tr>
    <td>
      <input class="sortme" value="Storm, Johnny">
    </td>
  </tr>
</table>

jQuery 处理代码 #

$(".sortme").each(function() {
  // 获取当前输入框的值
  const inputValue = $(this).val();
  // 提取首字符（若输入可能为空，可添加if(inputValue)判断）
  const firstChar = inputValue.charAt(0);
  // 在当前输入框前插入首字符，用span包裹方便后续排序操作
  $(this).before(`<span class="sort-char">${firstChar} </span>`);
});

可选：添加排序功能 #

如果需要实现点击表头排序，可以基于.sort-char的文本值对行进行排序，示例逻辑：

$("th").on("click", function() {
  const rows = $("table tr:not(:first)").toArray();
  // 按首字符升序排序（toLowerCase避免大小写影响）
  rows.sort((a, b) => {
    const charA = $(a).find(".sort-char").text().trim().toLowerCase();
    const charB = $(b).find(".sort-char").text().trim().toLowerCase();
    return charA.localeCompare(charB);
  });
  // 重新插入排序后的行
  $("table").append(rows);
});

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