最近 - 我在 SO 上发布了这个问题:Highlight rows in a html table with selected value
我有一个生成的 html 表和一个 JS 函数,它应该突出显示单元格“coversationid”具有相同值的所有行
这是一个 Fiddle 上的示例,效果很好:http://jsfiddle.net/sa4ED/
但是,如果我将相同的代码应用于我的代码,它会突然停止工作,我似乎无法找出原因......
HTML/JSP(简短版本):
<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="message"><c:out value="${message.shorterVersion()}" /></td>
<td class="conversationid"><c:out value="${message.conversationid}" /></td>
</tr>
</c:forEach>
</tbody>
其他地方有链接触发突出显示功能:
<a href="#"onclick="highlight('${message.conversationid}');">highlight</a>
JS:
function highlight(value) {
$(".conversationid").filter(function() {
return $(this).html() == value;
}).parent().css('background', "red");
}
当我点击这个函数时,它什么也不做。
我知道突出显示函数会被调用以及所有内容,如果我删除 parent()
部分,它起作用了,所有具有我想要的conversationid值的单元格都会突出显示。但是,我希望整行突出显示。所以它确实可以在没有 parent()
的情况下工作但不与它一起。
parent()
调用<td>
应该返回父级 <tr>
在这种情况下,对吧?怎么了?非常感谢您对调试的任何帮助...
CSS(简短版本):
table.pretty tbody tr.odd td {
background: #FFFEFE;
}
table.pretty tbody td {
text-align: left;
background: #E1E9FF;
}
最佳答案
将 td
背景更改为透明。
function highlight(value) {
$(".conversationid").filter(function() {
return $(this).html() == value;
}).css('background','transparent').parent().css('background', "red");
}
关于javascript - Parent() 函数不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22192457/