표를 이미 변경 한 경우 행 색상을 다시 흰색으로 변경하십시오.

기존 코드 상단에 기능을 추가하기 위해 아래 코드를 어떻게 수정하여 동일한 표 행을 이미 클릭했는지 (검정), 계속해서 다시 클릭하면 검은 색에서 흰색으로 바뀝니 까?표를 이미 변경 한 경우 행 색상을 다시 흰색으로 변경하십시오.

제이

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

을이 사람 : http://jsfiddle.net/uFrvN/

출처

2013-01-10 19:03:25

흠 경량. 고마워요. – user1959234

문제 없습니다. 이것이 당신의 문제를 해결했다면, 그것을 해결로 표시하십시오! –

것은이 제거됩니다

여기

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

전체 코드와 jsFiddle입니다모든 클래스를 만들고 필요한 클래스 만 설정합니다.

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

표를 이미 변경 한 경우 행 색상을 다시 흰색으로 변경하십시오.

답변

관련 문제