javascript - 使用 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>                                                                             

有人可以帮忙吗？对于这个问题的n00bish-ness表示歉意。

谢谢!

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 中。