單擊列值時突出顯示錶的特定行。需要javascript幫助

Question

有什麼辦法可以選擇表格的特定行作爲變量，然後更改它們的樣式。例如 - ：

 <a onclick="hl(this)">1,2,5</a> 

    <table> 
    <tr> 
    <tr> <td>.....</td></tr> 
    <tr> <td>.....</td></tr> 
    <tr> <td>.....</td></tr> 
    <tr> <td>.....</td></tr> 
    </tr> 
    </table> 

現在什麼hl函數所做的是當我點擊它1,2和5行應該突出顯示。我在想什麼通過提供像

 var m=table.rowIndex[1] 

或東西，然後索引做

 m.style.background="something" 

那麼它可能工作，如果有反正我可以使用某種選擇了行，但我沒有線索怎麼辦，請幫忙！

Answer 1

在您的示例標記中，table元素是a元素之後的下一個兄弟元素。如果這是真的，那麼：

function hl(anchor) { 
    var table = hl.nextSibling; 
    while (table && table.nodeName.toUpperCase() !== "TABLE") { 
     table = table.nextSibling; 
    } 
    if (table) { 
     var rows = table.getElementsByTagName('tr'); 
     rows[0].className += " highlighted"; 
     rows[1].className += " highlighted"; 
     rows[4].className += " highlighted"; 
    } 
} 

...其中類「突出」應用選擇的樣式。這假定沒有嵌套表。

更多閱讀：

• DOM2 Core
• DOM2 HTML
• DOM3 Core

---

FWIW，如果你還沒有使用一個，我建議使用JavaScript的好庫如jQuery,Prototype,YUI，Closure或any of several others。他們順暢瀏覽器差異，爲您提供許多實用功能。

Answer 2

如果您想通過行號作爲一個標籤的內容：

<script> 
    function hl(el){ 

     arr = (el.innerHTML).split(",") 

     var t = document.getElementById("tbl") 
     for(var i=0; i<arr.length; i++){ 
      t.rows[arr[i]].style.backgroundColor ="yellow"; 
     } 
     return false; 
    } 
</script> 

和HTML

<table id="tbl"> 
    <tr ><td >row 1</td></tr> 
    <tr><td>row 2</td></tr> 
    <tr><td>row 3</td></tr> 
    <tr><td>row 4</td></tr> 
</table> 
<a href="#" onclick="hl(this)">1,2,3</a> 

如果你想爲你的錶行，成爲點擊 - 所以不要通過陣列，但觸發突出點擊 - 你得這樣做：

js

function regEvents(){ 
    trs = document.getElementsByTagName("tr"); 
    for (var i=0; i<trs.length;i++){ 
     trs[i].onclick = hilite; 
    } 
} 
function hilite(){ 
this.style.background = "yellow"; 
} 

HTML

<table id="tbl"> 
    <tr ><td >row 1</td></tr> 
    <tr><td>row 2</td></tr> 
    <tr><td>row 3</td></tr> 
    <tr><td>row 4</td></tr> 
</table> 

和你的DOM加載後綁定的事件 - 所以把這個在您的HTML文件的

<script> 
regEvents(); 
</script> 

Answer 3

正如林奇說... jQuery的結束，特別是函數index（）。

而且這裏有雲（只是一般的想法）

$('#thingtobeclicked').click(function() 
{ 
    $('.selected').removeClass('selected'); 
    $(this).data('indices').each(function(i){ 
    $('#myTable tr:nth-child(i)').addClass('selected'); 
    }); 
}); 

希望它可以幫助別人或得到了我2代表點回.. :)

我忘了說：爲了做這項工作，你設定的指標要在thingtobeclicked的數據字段選擇，如：

<a href='#' id='thingtobeclicked' data-indices='1,3,5'></a> 
<table id='myTable'>... 

Answer 4

最好就是給你的功能有意義的名稱。另外，當按鈕或其他元素更適合時（例如，樣式化跨度），不要使用A元素。 A的用於導航（錨和鏈接），而不是用於做事。

下面是您正在嘗試使用rowIdex進行操作的示例。突出顯示的刪除和添加可以放在同一個循環中，或者您可以記住閉包中以前突出顯示的行，以使其效率更高一些。

但是，如果你處理的行少於100行（或可能更多），它不會對感知性能產生任何影響。

<script> 
function hilightRows(id, rowindexes) { 
    var table = document.getElementById(id); 
    var rows; 

    if (table && rowindexes) { 

    // Remove any current highlighting 
    for (var j=0, jLen = table.rows.length; j < jLen; j++) { 
     table.rows[j].style.backgroundColor = ''; 
    } 

    // Add new highlighting 
    for (var i=0, iLen = rowindexes.length; i<iLen; i++) { 
     table.rows[rowindexes[i]].style.backgroundColor = 'red'; 
    } 
    } 
} 
</script> 


<button onclick="hilightRows('t0', [1,2,5])">1, 2, 5</button>  
<button onclick="hilightRows('t0', [3,0])">3, 0</button>  
<button onclick="hilightRows('t0', [])">Remove highlight</button>  

<table id="t0"> 
    <tr><td>..... 
    <tr><td>..... 
    <tr><td>..... 
    <tr><td>..... 
    <tr><td>..... 
    <tr><td>..... 
    <tr><td>..... 
</table>