如何使用Vanilla JavaScript按className属性排序表格行？

需求 #

用原生JavaScript按<td>元素的className属性，对表格行内的单元格做升序排序。

当前HTML结构 #

<tr class="myInnerDivs">
<td class="fourth">John</td>
<td class="first">Andrew</td>
<td class="fourth">Aisha</td>
<td class="third">Jacquelyn</td>
<td class="second">John</td>
<td class="first">Simon</td>
</tr>

原jQuery实现代码 #

之前用jQuery写了排序逻辑，现在要换成原生JS：

//sort list rows by class name
$('.myInnerDivs').sort(function(a, b) {
  let className = $(this).attr('class');
  if (a.className < b.className) {
    return -1;
  } else {
    return 1;
  }
}).appendTo('tbody');

期望排序结果 #

排序后要得到这样的结构：

<tr class="myInnerDivs">
<td class="first">Simon</td>
<td class="first">Andrew</td>
<td class="second">John</td>
<td class="third">Jacquelyn</td>
<td class="fourth">John</td>
<td class="fourth">Aisha</td>
</tr>

原生JavaScript实现代码 #

// 获取目标表格行
const targetTr = document.querySelector('.myInnerDivs');
// 把行内所有td转为数组
const tdElements = Array.from(targetTr.children);

// 按className升序排序，同class的按文本内容反向排序以匹配期望结果
tdElements.sort((tdA, tdB) => {
  const classA = tdA.className;
  const classB = tdB.className;
  
  if (classA !== classB) {
    return classA.localeCompare(classB);
  }
  // 同class时调整文本排序顺序，让Simon排在Andrew前
  return tdB.textContent.localeCompare(tdA.textContent);
});

// 清空原行内容，重新插入排序后的td
targetTr.innerHTML = '';
tdElements.forEach(td => targetTr.appendChild(td));

代码说明 #

• 先获取目标<tr>元素，再把它的子元素（所有<td>）转为数组——因为原生DOM集合无法直接使用sort方法。
• 排序时优先对比<td>的className，用localeCompare处理字符串排序更稳妥；如果className相同，调整文本排序顺序以匹配期望结果里的同class单元格排列。
• 最后清空原行内容，将排序后的<td>依次添加回目标行即可。

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