用JavaScript突出顯示表格的一行

Question

大家好，StackOverflow，

預先為我的愚蠢行為致歉，但我需要您的幫助。

我有一個由SQL查詢生成的表，用戶需要能夠選擇一行，該行將值傳遞到隱藏的文本框中。 我設法做到這一點，但是我需要顯示他們選擇的行，並且如果他們改變主意然后選擇其他行，則僅突出顯示新行。

我知道這應該是非常基本的，但是我無法弄清楚邏輯。 到目前為止，我有這個：

function getOLBC(olbc)
{
    document.getElementById("ANSWER.TTQ.MENSYS.1.").value=olbc;
    var rows = document.getElementById("results").getElementsByTagName("tr").length;
    for (var i =0; i < rows; i++)
    {
        var answer = document.getElementById("ANSWER.TTQ.MENSYS.1.").value
        if (answer = olbc)
        {
            document.getElementById(olbc).style.background="red";
            document.getElementById(olbc).style.color="white";
        }
        else 
        {
            document.getElementById(olbc).style.background="white";
        }
    }
}

HTML看起來像這樣：

    <tr class="unselected" id="AL-AAA98"onclick="getOLBC('AL-AAA98')"><td class="OLBC">AL-AAA98</td><td>AAAL</td><td>Grade A in Economics<br />Grade A in Mathematics<br />Grade A in Business Studies</td><td></td></tr>
    <tr class="unselected" id="AL-AAA77"onclick="getOLBC('AL-AAA77')"><td class="OLBC">AL-AAA77</td><td>AAAL</td><td>Grade A in Economics<br />Grade A in Mathematics<br />Grade A in Spanish</td><td></td></tr>
    <tr class="unselected" id="AL-AAA42"onclick="getOLBC('AL-AAA42')"><td class="OLBC">AL-AAA42</td><td>A*AAL</td><td>Grade A in Mathematics<br />Grade A in Human Biology<br />Grade A in Physics</td><td></td></tr>                                                                             

有人可以幫忙嗎？ 對這個問題的解答表示歉意。

謝謝！

Answer 1

我認為這就是您要尋找的...我刪除了onclick dom元素（最好將js與dom分開）。

使用jQuery： http : //jsfiddle.net/cr1urhv6/

$("#myTable tr").click(function(e) {
  $("#myTable tr").removeClass("highlight");
  $(this).addClass("highlight");
});

或使用純js： http ： //jsfiddle.net/cr1urhv6/1/

var rows = document.querySelectorAll("#myTable tr");
for (var i = 0; i < rows.length; i++) {
    rows[i].addEventListener('click', function() {
        [].forEach.call(rows, function(el) {
            el.classList.remove("highlight");
            });
        this.className += ' highlight';
    }, false);
}

這將刪除當前的所有突出顯示...，然后將突出顯示類添加到我們在其中單擊的TR中。

Answer 2

嘗試做

if (answer == olbc)  

代替

if (answer = olbc)  

Answer 3

我最終也進行了修補，也找到了自己的解決方案，這也許不像Smerny的回答那么優雅，但這里是：

    function getOLBC(olbc){
    var selectedCount = document.getElementsByClassName("selected").length;

    if (selectedCount <= 0)
        {
        document.getElementById("ANSWER.TTQ.MENSYS.1.").value=olbc;
        document.getElementById(olbc).className="selected"
        }
    else 
        {
        var selectedRow = document.getElementsByClassName("selected")[0].id
        document.getElementById(selectedRow).className="deselected";
        document.getElementById("ANSWER.TTQ.MENSYS.1.").value=olbc;
        document.getElementById(olbc).className="selected"
        }