如果已將表格行顏色修改爲白色（如果它已被點擊）

如何修改下面的代碼以在現有代碼上添加功能，以便如果已經點擊過相同的表格行（黑色）和隨後再次點擊，它會從黑色變爲白色？如果已將表格行顏色修改爲白色（如果它已被點擊）

周杰倫

<!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>

來源

2013-01-10 user1959234

JsFiddle w /示例代碼：http://jsfiddle.net/RFQ76/ –

簡單地改變這樣的：

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

要這樣：

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

下面是完整的代碼的jsfiddle：http://jsfiddle.net/uFrvN/

來源

2013-01-10 19:03:25

完美無瑕，重量輕。非常感謝你:) – user1959234

沒問題。如果這解決了您的問題，請繼續並將其標記爲解決方案！ –

這將刪除所有的課程，只設置所需的課程。

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; 
     } 
    } 
}

來源

2013-01-10 19:03:58 ATOzTOA

愛這裏使用的邏輯。我的眼睛一定很累。我沒有看到我甚至可以做到這一點。這個例子也很棒。皮膚貓不止一種方式= \ – user1959234

如果已將表格行顏色修改爲白色（如果它已被點擊）

回答

相關問題