使用JavaScript突出顯示一行表格

你好善良的人StackOverflow，使用JavaScript突出顯示一行表格

道歉提前多麼愚蠢的我是，但我需要你的幫助。

我有一個由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>

誰能幫助？對於這個問題的缺點抱歉。

謝謝！

來源

2013-03-28 Andy Kaufman

1：如果（答案= olbc），您要分配olbc的價值來回答，而不是比較兩者。使用一個雙等於 – smerny

你分配olbc回答這一行'if（answer = olbc）'。 – Natalia

也，它不會出現循環內的任何內容正在改變？就像它每次迭代都要做同樣的事情一樣。 – smerny

if (answer == olbc)

相反，我認爲這是你正在尋找......什麼我刪除的onclick DOM元素（最好從DOM JS分開）。

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

來源

2013-03-28 15:13:05 smerny

嘗試做的

if (answer = olbc)

來源

2013-03-28 13:45:36 Ejaz

我最終修修補補夠找到自己的解決方案也是如此，這或許並不像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" 
     }

來源

2013-03-28 15:20:37

使用JavaScript突出顯示一行表格

回答

相關問題