html - 单击时表格行的背景颜色不变

Question

我试图在单击时更改表格行的背景颜色。

我已经尝试将 visited 和 focus 伪元素添加到 tr 标签，但输出仍然相同。

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  text-align: left;
  padding: 13px;
}

tr:nth-child(odd) {
  background-color: #f2f2f2;
}

tbody tr:hover {
  background-color: rgba(201, 228, 252) !important;
}

tbody tr:visited {
  background-color: rgba(201, 228, 252) !important;
}

<table id='tbl' cellspacing="40">
  <thead id='heading'>
    <tr>
      <td colspan="5" style="padding-right: 430px;"></td>
      <td style="padding-right: 300px;"></td>
      <td colspan="2" style="padding-right: 260px;"></td>
      <td colspan="2" style="padding-right: 215px;"></td>
    </tr>
  </thead>
  <div id='scrollbody'>
    <tbody>
      <tr>
        <td colspan="5">
          Evelyn Henderson
        </td>
        <td>
          Reviewer
        </td>
        <td colspan="2">
          (247) 262 5207
        </td>
        <td colspan="2">
          evelyn-90@gmail.com
        </td>
      </tr>
      <tr>
        <td colspan="5">
          John John
        </td>
        <td>
          Reviewer
        </td>
        <td colspan="2">
          (247) 262 5207
        </td>
        <td colspan="2">
          jjohn@gmail.com
        </td>
      </tr>
      <tr>
        <td colspan="5">
          Fred Fred
        </td>
        <td>
          Reviewer
        </td>
        <td colspan="2">
          (247) 262 5207
        </td>
        <td colspan="2">
          ffred@gmail.com
        </td>
      </tr>
      <tr>
        <td colspan="5">
          Luke Luke
        </td>
        <td>
          Reviewer
        </td>
        <td colspan="2">
          (247) 262 5207
        </td>
        <td colspan="2">
          lluke@gmail.com
        </td>
      </tr>
    </tbody>
  </div>
</table>

我希望输出是当我单击表格行时该行保持突出显示，但单击它时没有任何反应。此外，我希望一次突出显示一行。

Answer 1

您需要使用 javascript/jquery。以下是使用 JQuery 的方法:

$('#tbl tr').on('click', function (){
    $('.clicked').removeClass('clicked');
	$(this).addClass('clicked');
});

table {
        border-collapse: collapse;
        width: 100%;
    }

      th, td {
        text-align: left;
        padding: 13px;
      }

      tr:nth-child(odd) {background-color: #f2f2f2;}

      tbody tr:hover {
        background-color: rgba(201, 228, 252) !important;
      }

      tbody tr.clicked {
        background-color: rgba(201, 228, 252) !important; 
      }    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id = 'tbl' cellspacing="40">
      <thead id = 'heading'>
        <tr>
          <td colspan = "5" style="padding-right: 430px;"></td>
          <td style="padding-right: 300px;"></td>
          <td colspan = "2" style="padding-right: 260px;"></td>
          <td colspan = "2" style="padding-right: 215px;"></td>
        </tr>
      </thead>
      <div id = 'scrollbody'>
        <tbody>
          <tr>
            <td colspan = "5">
              Evelyn Henderson
            </td>
            <td>
              Reviewer
            </td>
            <td colspan = "2">
              (247) 262 5207
            </td>
            <td colspan = "2">
              evelyn-90@gmail.com
            </td>
          </tr>
          <tr>
            <td colspan = "5">
              John John
            </td>
            <td>
              Reviewer
            </td>
            <td colspan = "2">
              (247) 262 5207
            </td>
            <td colspan = "2">
              jjohn@gmail.com
            </td>
          </tr>
          <tr>
            <td colspan = "5">
              Luke Luke
            </td>
            <td>
              Reviewer
            </td>
            <td colspan = "2">
              (247) 262 5207
            </td>
            <td colspan = "2">
              lluke@gmail.com
            </td>
          </tr>
          <tr>
            <td colspan = "5">
              Fred Fred
            </td>
            <td>
              Reviewer
            </td>
            <td colspan = "2">
              (247) 262 5207
            </td>
            <td colspan = "2">
              ffred@gmail.com
            </td>
          </tr>
        </tbody>
      </div>
    </table>