高亮行与选定值

我有一个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>

我知道可以当行使用JavaScript突出的行（或列）有一些特定的ID，但我不确定我是否可以使用值做同样的事情。

我想要做的是在“conversationid”列中突出显示具有相同值的所有行。这个想法如下：

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

- 与此的conversationId

我知道创建表时，我可以指定每行一个id>高亮行，但某些行将具有相同的ID，我认为这是违反在HTML中的id的概念，对不对？此外，它会更容易使它使用值的工作，但我不知道hether这样的事情是可能的JavaScript ...

此外 - 后续问题：我正在使用datatables插件在我的表和列“conversid “隐藏 - 它会影响所需的功能（我认为不是，因为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>

- >突出使用HTML结构行1和3

希望很显然......

来源

2014-02-28 Smajl

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

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

来源

2014-02-28 09:58:40 sanjeev

我会尝试在小提琴 – Smajl

我obvously失去了一些东西，但你可以采取HTTP看看：// jsfiddle.net/Cjb3B/？谢谢！ – Smajl

jquery文件不存在 – sanjeev

：

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'); 
    }) 
}

来源

2014-02-28 10:06:34

添加了函数 –

高亮行与选定值

回答

相关问题