Question

最近 - 我发布了这个问题：Highlight rows in a html table with selected value

我有一个生成的html表和一个JS函数，它应该突出显示具有相同单元格值的所有行“coverationid”

以下是关于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()的{{1}}应该返回<td>的父级，对吗？怎么了？非常感谢您对调试的任何帮助......

CSS（简短版）：

<tr>

Answer 1

试一试

 $(".conversationid").filter(function() {
        return $(this).html() == value;
    }).closest('tr').find('td').css('background', "red");

Answer 2

使用parent（）。find（＆＃39; td＆＃39;）而不仅仅是parent（）。您已经在CSS中声明了td背景颜色，它覆盖了tr的背景颜色。

function highlight(value) { 
    $(".conversationid").filter(function() {
        return $(this).html() == value;
    }).parent().find('td').css('background', "red");
}

Answer 3

将td背景更改为透明。

function highlight(value) { 
    $(".conversationid").filter(function() {
        return $(this).html() == value;
    }).css('background','transparent').parent().css('background', "red");
}

parent（）函数不起作用

3 个答案: