突出顯示具有選定值的html表中的行

Question

我有一個在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>

->突出顯示具有此sessionid的行

我知道我可以在創建表時為每行分配一個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行。

希望清楚...

Answer 1

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

Answer 2

使用您的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');
    })
}

突出顯示具有選定值的html表中的行

問題描述

2 個解決方案

解決方案1
1 已采納 2014-02-28 09:58:40

解決方案2
0 2014-02-28 10:06:34

突出顯示具有選定值的html表中的行

問題描述

2 個解決方案

解決方案1 1 已采納 2014-02-28 09:58:40

解決方案2 0 2014-02-28 10:06:34

解決方案1
1 已采納 2014-02-28 09:58:40

解決方案2
0 2014-02-28 10:06:34