如果已单击表行颜色，则将其更改回白色

Change Table Row Color back to white if it has already been clicked

本文关键字：白色 单击 颜色 如果      更新时间：2023-09-26

如何修改下面的代码以在现有代码的基础上添加功能，以便如果已经单击(黑色)并且随后再次单击的同一表行，它将从黑色变为白色?

周杰伦

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
tr.normal td {
    color: black;
    background-color: white;
}
tr.highlighted td {
    color: white;
    background-color: black;
}
</style>
</head>
<body>
<div id="results" class="scrollingdatagrid">
  <table id="mstrTable" cellspacing="0" border="1">
     <thead>
      <tr> 
        <th>File Number</th>
        <th>Date1</th>
        <th>Date2</th>
        <th>Status</th>
        <th>Num.</th>
      </tr>
    </thead>
    <tbody>
      <tr> 
        <td>KABC</td>
        <td>09/12/2002</td>
        <td>09/12/2002</td>
        <td>Submitted</td>
        <td>0</td>
      </tr>
      <tr> 
        <td>KCBS</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Lockdown</td>
        <td>2</td>
      </tr>
      <tr> 
        <td>WFLA</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Submitted</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>WTSP</td>
        <td>09/15/2002</td>
        <td>09/15/2002</td>
        <td>In-Progress</td>
        <td>10</td>
      </tr>
    </tbody>
  </table>
</div>
<script type="text/javascript">
(
  function( )
  {
      var trows = document.getElementById("mstrTable").rows;
      for ( var t = 1; t < trows.length; ++t )
      {
          trow = trows[t];
          trow.className = "normal";
          trow.onclick = highlightRow;
      }
      function highlightRow( )
      {
          for ( var t = 1; t < trows.length; ++t )
          {
              trow = trows[t];
              trow.className = ( trow == this ) ? "highlighted" : "normal";
          }
      }
  }
)();
</script>
</body>
</html>

修改如下:

trow.className = ( trow == this ) ? "highlighted" : "normal";

: 

trow.className = ( trow == this && trow.className != "highlighted") ? "highlighted" : "normal";

下面是一个jsFiddle的完整代码:http://jsfiddle.net/uFrvN/

这将删除所有的类，只设置需要的类。

function highlightRow( )
{
    for ( var t = 1; t < trows.length; ++t )
    {
        trow = trows[t];
        if(trow == this) {
            c = trow.className;
            trow.className = "";
            trow.className = ( c == "normal") ? "highlighted" : "normal";
            break;
        }
    }
}
相关文章：