如何在选择下拉菜单ID为3的Closed选项时将表格记录文本置灰

当选择表格中状态下拉菜单里ID为3的「Closed（已关闭）」选项时，将对应表格记录的CaseID、Date、Name、Details及Status栏的文本置灰。

现有代码问题 #

1. 多个元素重复使用同一id（如creditcard、payment-method），DOM中ID必须唯一，会导致JS无法精准定位目标元素
2. 下拉菜单的onChange事件绑定错误，<ul>标签不支持该事件，需给下拉项绑定点击事件
3. 当前selectChanged函数逻辑错误，无法定位对应行元素，也未实现置灰逻辑

解决方案 #

1. 修正HTML结构 #

遍历生成表格行时，给每行添加唯一标识，给需要置灰的列添加统一类名，同时给下拉项绑定点击事件并传递关键参数：

<% for (let count = 0; count < incident_reports.length; count++) { %>
<tr class="report-row <%= incident_reports[count].Status === 'Closed' ? 'closed' : '' %>" data-report-id="<%= incident_reports[count]._id %>">
  <td ><div class="report-field"><%= incident_reports[count].caseID %></div></td>
  <td class="text-center"><div class="report-field"><%= incident_reports[count].date %></div></td>
  <td class="text-center" ><div class="report-field"><%= incident_reports[count].name %></div></td>
  <td class="text-center" ><div class="report-field"><%= incident_reports[count].details %></div></td>
  <td class="text-center"><div class="report-field">test<%= incident_reports[count].Status %></div></td>

  <td class="text-center">
    <a href="/reports/edit/<%= incident_reports[count]._id %>" class="btn btn-primary" style="background-color: #f59e2e; border-color:#f59e2e;"
      ><i class="fa fa-plus"></i> Edit</a
>
<a href="/reports/delete/<%= incident_reports[count]._id %>" class="btn btn-warning btn-sm" style="background-color: #ff3e3e; color: white; border-color: #ff3e3e;">
  <i class="fas fa-trash-alt"></i> Delete</a>

    <div class="btn-group">
      <button type="button" class="btn  dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Status
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="/reports/inprogress/<%= incident_reports[count]._id %>" onclick="updateStatus('<%= incident_reports[count]._id %>', 1)">In Progress</a></li>
        <li><a class="dropdown-item" href="/reports/dispatched/<%= incident_reports[count]._id %>" onclick="updateStatus('<%= incident_reports[count]._id %>', 2)">Dispatched</a></li>
        <li><a class="dropdown-item" href="/reports/closed/<%= incident_reports[count]._id %>" onclick="updateStatus('<%= incident_reports[count]._id %>', 3)">Closed</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
    </div>
  </td>
</tr>
<% } %>

2. 添加置灰CSS样式 #

在页面<style>标签或全局CSS文件中添加：

.report-row.closed .report-field {
  color: #999;
  opacity: 0.7;
}

3. 替换JavaScript函数 #

替换原有selectChanged函数，实现状态判断与样式切换：

function updateStatus(reportId, statusValue) {
  const reportRow = document.querySelector(`tr[data-report-id="${reportId}"]`);
  
  if (statusValue === 3) {
    reportRow.classList.add('closed');
  } else {
    reportRow.classList.remove('closed');
  }
}

额外说明 #

• 代码中给已关闭的行默认添加了closed类，确保页面刷新后置灰状态依然保留
• 下拉项的href会触发页面跳转更新后端状态，JS逻辑会在跳转前先完成置灰操作；若需异步更新状态不跳转，可添加event.preventDefault()并通过fetch发送请求

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