錶行有問題的雙重突出顯示

下面的代碼與預期的一樣工作得很好，但是，如何修改它，以便在用戶還使用Go to Row按鈕時不會突出顯示雙行。錶行有問題的雙重突出顯示

現在當用戶使用他們的鼠標點擊一個排它突出了，（偉大的，這裏沒問題）

但如果用戶還點擊Go的一個按鈕，它突出了指定的行。（很好，但現在有2行是突出顯示，我只想要1行突出顯示在一個時間）

我的理論是，如果其中一個按鈕去按鈕，代碼應該看到哪一行如果高亮顯示），請高亮顯示並繼續高亮顯示指定的行。

請不要使用jQuery庫。

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
#mstrTable { 
    border: 1px solid black 
} 
#mstrTable td, th { 
    border: 1px solid black 
} 

#mstrTable tr.normal td { 
    color: black; 
    background-color: white; 
} 
#mstrTable tr.highlighted td { 
    color: white; 
    background-color: gray; 
} 
</style> 
</head> 
<body> 
    <table id="mstrTable"> 
    <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>Approved</td> 
     <td>1&nbsp;</td> 
     </tr> 

     <tr> 
     <td>WFLA</td> 
     <td>09/11/2002</td> 
     <td>09/11/2002</td> 
     <td>Submitted</td> 
     <td>2</td> 
     </tr> 
     <tr> 
     <td>WTSP</td> 
     <td>09/15/2002</td> 
     <td>09/15/2002</td> 
     <td>In-Progress</td> 
     <td>3</td> 
     </tr> 
    </tbody> 
    </table> 

    <br> 
<input type="button" name="" value="GoTo 0" onmouseup="GoTo('mstrTable',0);" /> 
<input type="button" name="" value="GoTo 1" onmouseup="GoTo('mstrTable',1);" /> 
<input type="button" name="" value="GoTo 2" onmouseup="GoTo('mstrTable',2);" /> 
<input type="button" name="" value="GoTo 3" onmouseup="GoTo('mstrTable',3);" /> 


<script type="text/javascript"> 

var table = document.getElementById("mstrTable"); 
var thead = table.getElementsByTagName("thead")[0]; 
var tbody = table.getElementsByTagName("tbody")[0]; 

tbody.onclick = function (e) { 
    e = e || window.event; 
    var td = e.target || e.srcElement; //assumes there are no other elements inside the td 
    var row = td.parentNode; 
    //alert('Row is ' + (row.rowIndex - 1)) ### FOR LATER (DB BACK END USE) ### 
    if (this.lst&&this.lst!=row){ 
    this.lst.className=''; 
    } 
    row.className = row.className==="highlighted" ? "" : "highlighted"; 
    this.lst=row; 
} 

thead.onclick = function (e) { 
    e = e || window.event; 
    var th = e.target || e.srcElement; //assumes there are no other elements in the th 
    //alert(th.innerHTML); ### FOR LATER (DB BACK END USE) ### 
} 

function GoTo(id,nu){ 
    var obj=document.getElementById(id),trs=obj.getElementsByTagName('TR');; 
    nu = nu + 1 
    if (trs[nu]){ 
    if (GoTo.lst&&GoTo.lst!=trs[nu]){ 
    GoTo.lst.className=''; 
    } 
    trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted"; 
    GoTo.lst=trs[nu]; 
    } 
} 

</script> 
</body> 
</html>

來源

2013-01-20 user1959234

你的代碼有點複雜。你可以做得更簡單 – polin

您可以快速使用一個全球性的爲您突出顯示行的解決這個問題。以http://jsbin.com/atiwex/1/edit爲例。

<script type="text/javascript"> 

var table = document.getElementById("mstrTable"); 
var thead = table.getElementsByTagName("thead")[0]; 
var tbody = table.getElementsByTagName("tbody")[0]; 
var ishigh; 

tbody.onclick = function (e) { 
    e = e || window.event; 
    var td = e.target || e.srcElement; //assumes there are no other elements inside the td 
    var row = td.parentNode; 
    if (ishigh&&ishigh!=row){ 
    ishigh.className=''; 
    } 
    row.className = row.className==="highlighted" ? "" : "highlighted"; 
    ishigh=row; 
} 

thead.onclick = function (e) { 
    e = e || window.event; 
    var th = e.target || e.srcElement; //assumes there are no other elements in the th 
    //alert(th.innerHTML); ### FOR LATER (DB BACK END USE) ### 
} 

function GoTo(id,nu){ 
    var obj=document.getElementById(id), 
     trs=obj.getElementsByTagName('TR'); 
    nu = nu + 1; 
    if (trs[nu]){ 
    if (ishigh&&ishigh!=trs[nu]){ 
     ishigh.className=''; 
    } 
    trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted"; 
    ishigh=trs[nu]; 
    } 
} 
</script>

來源

2013-01-20 06:11:32 fbynite

工程就像一個魅力！非常感謝。我仍然認爲自己在Javascript的arookie – user1959234

錶行有問題的雙重突出顯示

回答

相關問題