[英]Highlight One Row of a Table with Javascript
Hello good people of StackOverflow, 大家好,StackOverflow,
Apologies in advance for how monumentally stupid I am being, but I need your help. 预先为我的愚蠢行为致歉,但我需要您的帮助。
I have a table which is generated by an SQL query and the user needs to be able to select one row, which passes a value into a hidden text box. 我有一个由SQL查询生成的表,用户需要能够选择一行,该行将值传递到隐藏的文本框中。 This bit I have managed to do OK, but I need to show which row they have selected, and if they change their mind and then select a different row, only the new row is highlighted. 我设法做到这一点,但是我需要显示他们选择的行,并且如果他们改变主意然后选择其他行,则仅突出显示新行。
I know this should be pretty basic, but I can't work out the logic. 我知道这应该是非常基本的,但是我无法弄清楚逻辑。 So far I have this: 到目前为止,我有这个:
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";
}
}
}
The HTML looks like this: 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>
Can anyone help? 有人可以帮忙吗? Apologies for the n00bish-ness of this question. 对这个问题的解答表示歉意。
Thanks! 谢谢!
I think this is what you are looking for... I removed the onclick dom element (better to separate the js from the dom). 我认为这就是您要寻找的...我删除了onclick dom元素(最好将js与dom分开)。
with jquery: http://jsfiddle.net/cr1urhv6/ 使用jQuery: http : //jsfiddle.net/cr1urhv6/
$("#myTable tr").click(function(e) {
$("#myTable tr").removeClass("highlight");
$(this).addClass("highlight");
});
or with pure js: http://jsfiddle.net/cr1urhv6/1/ 或使用纯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);
}
This is removing any current highlighting... and then adding the highlight class to the TR we clicked within. 这将删除当前的所有突出显示...,然后将突出显示类添加到我们在其中单击的TR中。
try doing 尝试做
if (answer == olbc)
instead of 代替
if (answer = olbc)
I eventually tinkered enough to find my own solution too, which perhaps isn't as elegant as Smerny's answer but here it is: 我最终也进行了修补,也找到了自己的解决方案,这也许不像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"
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.