使用选定值突出显示html表中的行 [英] Highlight rows in a html table with selected value
问题描述
我有一个用portlet中的数据填充的html表（这是代码的一部分）：
< tbody> ;
< c：forEach var =messageitems =$ {messages}>
< tr>
< td class =time>< c：out value =$ {message.timestamp}/>< / td>
< td class =sender>< c：out value =$ {message.sender}/>< / td>
< td class =receiver>< c：out value =$ {message.receiver}/>
< / td>
< td class =performative>
< c：out value =$ {message.performative}/>
< / td>
< td class =message>< c：out value =$ {message.shorterVersion（）}/>< / td>
< td class =conversationid>< c：out value =$ {message.conversationid}/>< / td>
< / tr>
< / c：forEach>
< / tbody>
我知道当行（或列）有一些特定的id时，我可以使用javascript突出显示行，但我不确定是否可以使用值来做同样的事情。
我想要做的是在conversationid列中突出显示具有相同值的所有行。这个想法如下：
< a href =＃onclick =highlight（'$ {message.conversationid} '）;>点击我< / a>
- >使用此会话突出显示行
我知道我可以在创建表时为每行分配一个id，但是某些行会有相同的id，我认为这违反了HTML中id的概念，对不对？此外，它会容易使它使用值的工作，但我不知道这样的事情是可能的JavaScript ...
另外 - 后续问题：我是在我的表上使用数据表插件，而conversationid列隐藏 - 是否会影响所需的功能（我认为不是，因为html本身保持不变）
感谢您提供任何提示！
编辑：这里是一个例子：
< table>
< tr>
< td class =message> message1< / td>
< td class =conversationid> 123< / td>
< / tr>
< tr>
< td class =message> message2< / td>
< td class =conversationid> 456< / td>
< / tr>
< tr>
< td class =message> message3< / td>
< td class =conversationid> 123< / td>
< / tr>
< / table>
< a href =＃onclick =highlight（'123'）;>点击我< / a>
- >突出显示第1行和第3行。
希望这是明确的...
< html>
< body>
< script src =http://code.jquery.com/jquery-1.10.2.js>< / script>
< script>
函数highlight（value）{
$（.conversationid）.filter（function（）{
return $（this）.html（）== value; //指定您的html这里
}）.css（'color'，red）;
}
< / script>
< table>
< tr>
< td class =message> message1< / td>
< td class =conversationid> 123< / td>
< / tr>
< tr>
< td class =message> message2< / td>
< td class =conversationid> 456< / td>
< / tr>
< tr>
< td class =message> message3< / td>
< td class =conversationid> 123< / td>
< / tr>
< / table>
< a href =＃onclick =highlight（'123'）;>点击我< / a>
< / body>
< / html>
I have a html table filled with data in a portlet (this is part of the code):
<tbody>
<c:forEach var="message" items="${messages}">
<tr>
<td class="time"><c:out value="${message.timestamp}" /></td>
<td class="sender"><c:out value="${message.sender}" /></td>
<td class="receiver"><c:out value="${message.receiver}" />
</td>
<td class="performative">
<c:out value="${message.performative}" />
</td>
<td class="message"><c:out value="${message.shorterVersion()}" /></td>
<td class="conversationid"><c:out value="${message.conversationid}" /></td>
</tr>
</c:forEach>
</tbody>
I know I can highlight rows using javascript when the row (or column) has some specific id, but I am not sure if I can do the same using values.
What I would like to do, is to highlight all rows with same values in "conversationid" column. The idea is as follows:
<a href="#"onclick="highlight('${message.conversationid}');">click me</a>
-> highlight rows with this conversationid
I know I could assign each row an id when creating the table but some rows will have same id and I think that is violates the concept of id in HTML, right? Also, it would be much easier to make it work using values but I dont know hether such thing is possible in javascript...
Also - follow up question: I am using datatables plugin on my table and the column "conversationid" is hidden - will it affect the desired functionality (I think not, because the html itself stays the same)?
Thanks for any tips!
EDIT: here is an example:
<table>
<tr>
<td class="message">message1</td>
<td class="conversationid">123</td>
</tr>
<tr>
<td class="message">message2</td>
<td class="conversationid">456</td>
</tr>
<tr>
<td class="message">message3</td>
<td class="conversationid">123</td>
</tr>
</table>
<a href="#"onclick="highlight('123');">click me</a>
-> highlights rows 1 and 3.
Hope it is clear...
<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function highlight(value){
$( ".conversationid" ).filter(function(){
return $(this).html()==value; //specify your html here
}).css('color',"red" );
}
</script>
<table>
<tr>
<td class="message">message1</td>
<td class="conversationid">123</td>
</tr>
<tr>
<td class="message">message2</td>
<td class="conversationid">456</td>
</tr>
<tr>
<td class="message">message3</td>
<td class="conversationid">123</td>
</tr>
</table>
<a href="#"onclick="highlight('123');">click me</a>
</body>
</html>
这篇关于使用选定值突出显示html表中的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
