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>

- ＆GT;使用此对话框突出显示行

我知道在创建表时我可以为每一行分配一个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>

- ＆GT;突出显示第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 个答案: