突出显示具有选定值的 html 表中的行答案

【问题标题】：Highlight rows in a html table with selected value突出显示具有选定值的 html 表中的行
【发布时间】：2014-04-01 05:45:29
【问题描述】：

我有一个在 portlet 中填充数据的 html 表（这是代码的一部分）：

<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>

我知道当行（或列）具有某些特定 ID 时，我可以使用 javascript 突出显示行，但我不确定是否可以使用值来做同样的事情。

我想做的是突出显示“conversationid”列中具有相同值的所有行。思路如下：

<a href="#"onclick="highlight('${message.conversationid}');">click me</a>

-> 使用此对话 ID 突出显示行

我知道我可以在创建表格时为每一行分配一个 id，但有些行会有相同的 id，我认为这违反了 HTML 中的 id 概念，对吧？此外，使用值使其工作会容易得多，但我不知道在 javascript 中是否有可能......

另外 - 后续问题：我在我的桌子上使用 datatables 插件并且“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');">click me</a>

-> 突出显示第 1 行和第 3 行。

希望清楚...

【问题讨论】：

我已经编辑了我的答案，一定会帮助你

标签： javascript html

【解决方案1】：

使用您的 html 结构：

function highlight(my_id) {
    $('.conversationid').each(function(){
        if ($(this).text() === my_id) {
            //do highlight here
            $(this).parents('tr').addClass('highlight');
        }
    })
}

或者使用html5数据属性

<table>
    <tr data-convid="123">
        <td class="message">message1</td>
        <td class="conversationid">123</td>
    </tr>
    <tr data-convid="456">
        <td class="message">message2</td>
        <td class="conversationid">456</td>
    </tr>
    <tr data-convid="123">
        <td class="message">message3</td>
        <td class="conversationid">123</td>
    </tr>
</table>

js函数

function highlight(my_id) {
    $('tr[data-convid="'+ my_id +'"]').each(function(){
        //do highlight here
        $(this).addClass('highlight');
    })
}

【讨论】：

【解决方案2】：

            <!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>

【讨论】：

我会在小提琴上试试
我显然遗漏了一些东西，但你能看看jsfiddle.net/Cjb3B 吗？谢谢！
jquery 文件丢失
谢谢，就是最后一件事：这仅突出显示值..如果我想突出显示整行怎么办？（带有 id 的列通常是隐藏的）
function highlight(value){$( ".conversationid" ).filter(function(){return $(this).html()==value;}).css('background',"red" ); }