如何通过JavaScript实现表格中播放/暂停图标的全局状态同步？

要实现「点击某行播放图标切换为暂停时，其余所有行自动变回播放图标」的功能，核心思路是先统一重置所有图标的状态为播放，再单独处理当前点击行的状态，这样就能保证同一时间最多只有一行显示暂停图标，完全匹配你的需求。

下面是修改后的完整JavaScript代码，我会标注关键改动点：

const data = [{ Name: 'Chapter 1', TrackId: 1 }, { Name: 'Chapter 2', TrackId: '2' }, { Name: 'Chapter 3', TrackId: '3' }, { Name: 'Chapter 4', TrackId: '4' }]; // 修正了原数据里多余的逗号
const tableData = data.map(function(value) {
  return (
    `<tr>
      <th scope="row">
        <span data-track-id='${value.TrackId}' class="play-button btn">
          <i class="fa-solid fa-circle-play"></i>
        </span>
      </th>
      <td>${value.Name}</td>
    </tr>`
  );
}).join('');
const tabelBody = document.querySelector("#tableBody");
tabelBody.innerHTML = tableData;
const pauseIconClassName = 'fa-circle-pause'
const playIconClassName = 'fa-circle-play'
const btns = document.querySelectorAll('.play-button')

function onChange(event) {
  // 1. 先获取所有图标元素，统一重置为播放状态
  const allIcons = document.querySelectorAll('.play-button i');
  allIcons.forEach(icon => {
    icon.classList.remove(pauseIconClassName);
    icon.classList.add(playIconClassName);
  });

  // 2. 处理当前点击的图标
  const buttonElement = event.currentTarget.querySelector('i');
  const isPlayButton = buttonElement.classList.contains(playIconClassName);
  
  // 如果当前是播放图标，切换为暂停（因为已经统一重置过，这里只需要处理当前行）
  if (isPlayButton) {
    buttonElement.classList.remove(playIconClassName);
    buttonElement.classList.add(pauseIconClassName);
  }
  // 如果当前是暂停图标，点击后会被上面的重置操作改为播放，符合「取消播放」的预期
}

btns.forEach(btn => {
  btn.addEventListener('click', onChange)
})

关键改动说明： #

• 统一重置所有图标：在处理当前点击行为前，先遍历所有播放按钮的图标，强制将它们都设为fa-circle-play，确保其他行的图标都变回播放状态。
• 简化当前行逻辑：因为已经完成全局重置，只需要判断当前点击的图标是否为播放状态——如果是，就切换为暂停；如果原本是暂停，点击后会被重置为播放，完美匹配「取消播放」的操作预期。
• 顺便修正了原data数组里多余的逗号，避免潜在的语法问题。

这样修改后，就能完美实现你想要的功能：点击某行播放图标时，该行变暂停，其余所有行自动变回播放；点击暂停图标时，该行变回播放，其他行保持播放状态不变。

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