当我将 select 作为下拉菜单中的第三个选项时，我如何将表格记录中文本的 rest 变灰？

Question

当我 select 是我的表格菜单中的第三个选项时，我目前正试图让我的其他表格项目变灰，该选项称为“关闭”，ID 为 3。

这是在状态下拉菜单中，如此处所示。

当表记录的状态部分为“关闭”时，我试图弄清楚如何使 CaseID、日期、名称、详细信息和状态部分变灰。

    <% include ../partials/header.ejs %> 

<% include ../partials/main_nav.ejs %> 



<!-- MAIN CONTENT -->
<div class="jumbotron">
<div class="container">
  <div class="reportContainer">
  <div class="row">
    <div class="col-md-offset-1 col-md-10">
      <h1 class="display-4">Incident Reports</h1>  
      
      
      <br />
      <!-- Details of the table and how to submit new reports -->
      <p>The information below is the current incident reports that have been submitted.<p>
       <p> To add a new report, click <a href="/reports/add">here</a> or use the <strong>Create a Report</strong> button below.<br>
          To edit a report, a report, use the Edit button.<br>
          To delete a report, click the <strong>Delete</strong> button. This is instant, permanent, and will not ask for confirmation.</p>
      <div class="table-responsive">
        <table class="table table-bordered table-striped table-hover">
          <thead>
            <tr>
              <th>CaseID</th>
              <th class="text-center">Date</th>
              <th class="text-center">Name</th>
              <th class="text-center">Details</th>
              <th class="text-center">Status</th>
              <th class="text-center"></th>
            </tr>
          </thead>
          <tbody>
            <!-- Template Row -->

            <% for (let count = 0; count < incident_reports.length; count++) { %>
            <tr>
              <td ><div  id="creditcard"><%= incident_reports[count].caseID %></div></td>
              <td class="text-center"><div id="creditcard"><%= incident_reports[count].date %></div></td>
              <td class="text-center" ><div  id="creditcard"><%= incident_reports[count].name %></div></td>
              <td class="text-center" ><div  id="creditcard"><%= incident_reports[count].details %></div></td>
              <td class="text-center"><div id="creditcard">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" onChange="selectChanged()">
            <li><a class="dropdown-item" href="/reports/inprogress/<%= incident_reports[count]._id %>" id="payment-method" value="1">In Progress</a></li>
            <li><a class="dropdown-item" href="/reports/dispatched/<%= incident_reports[count]._id %>" id="payment-method" value="2">Dispatched</a></li>
            <li><a class="dropdown-item" href="/reports/closed/<%= incident_reports[count]._id %>" id="payment-method" value="3">Closed</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Separated link</a></li>
          </ul>
        </div>

              </td>
            </tr>
            <% } %>
          </tbody>
        </table>
      </div>
  </main>
  <a href="/reports/add" class="btn btn-primary"><i class="fa fa-plus"></i> Create a Report</a>

      <div class="col-md-offset-1 col-md-10 text-center">
        <ul class="pagination pagination-lg pager" id="myPager"></ul>
      </div>
      </div>
    </div>
  </div>
</div>
</div>


<script>
  function selectChanged() {
    var x = document.getElementById("payment-method").value;
    document.getElementById("creditcard").disabled = (x == 1);
  }
   
  </script>

<% include ../partials/bottom_nav.ejs %>

<% include ../partials/footer.ejs %>

先感谢您。

Answer 1

HTML

为每一行添加data-status属性以跟踪当前状态。

...
<tbody>
  <!-- Template Row -->
  <% for (let count = 0; count < incident_reports.length; count++) { %>
    <tr data-status="<%= incident_reports[count].Status %>">
      <td>
        <span> <!-- 👈 add span tag to change text color. -->
        <%= incident_reports[count].caseID %>
        </span>
      </td>
      <td class="text-center" for="payment-method">
        <span>
        <%= incident_reports[count].date %>
        </span>
      </td>
      <td class="text-center">
        <span>
        <%= incident_reports[count].name %>
        </span>
      </td>
      <td class="text-center">
        <span>
        <%= incident_reports[count].details %>
        </span>
      </td>
      <td class="text-center">
        <span>
        <%= incident_reports[count].Status %>
        </span>
      </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" onChange="selectChanged()">
            <li><a class="dropdown-item" href="/reports/inprogress/<%= incident_reports[count]._id %>" id="1">In Progress</a></li>
            <li><a class="dropdown-item" href="/reports/dispatched/<%= incident_reports[count]._id %>" id="2">Dispatched</a></li>
            <li><a class="dropdown-item" href="/reports/closed/<%= incident_reports[count]._id %>" 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>
    <% } %>
</tbody>
...

CSS

将此规则添加到 css 到 select <tr>具有data-status="Closed" 。

...
tbody tr[data-status="Closed"] td > span {
  color: gray;
}
...