Javascript 突出显示html表中具有选定值的行_Javascript_Html

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

javascript html

Javascript 突出显示html表中具有选定值的行,javascript,html,Javascript,Html,我在portlet中有一个填充了数据的html表（这是代码的一部分）：我知道，当行（或列）具有特定id时，我可以使用javascript高亮显示行，但我不确定是否可以使用值执行相同的操作我想做的是突出显示“conversationid”列中具有相同值的所有行。其思路如下： <a href="#"onclick="highlight('${message.conversationid}');">click me</a> ->突出显示具有此conversati

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

我知道，当行（或列）具有特定id时，我可以使用javascript高亮显示行，但我不确定是否可以使用值执行相同的操作

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

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

->突出显示具有此conversationid的行

我知道我可以在创建表时为每一行分配一个id，但有些行将具有相同的id，我认为这违反了HTML中id的概念，对吗？另外，使用值使其工作起来会容易得多，但我不知道在javascript中是否可能实现这种功能

还有-后续问题：我在我的表上使用插件，而“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
123
信息2
456
信息3
123

->高亮显示第1行和第3行

希望是清楚的…


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

功能突出显示（值）{
$（“.conversationid”）.filter（函数（）{
return$（this）.html（）==value；//在此处指定您的html
}).css（“颜色”、“红色”）；
}
信息1
123
信息2
456
信息3
123

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

我已经编辑了我的答案，肯定会帮你的。我会在小提琴上试一下。我很明显遗漏了一些东西，但你能看一下吗？谢谢jquery文件丢失了存储库，仅此而已-最后一件事：这只突出显示值。。如果我想突出显示整行怎么办？（id为的列通常是隐藏的）

函数高亮显示（值）{$（“.conversationid”）.filter（函数（）{return$（this.html（）==value；}）.css（'background'，“red”）；}

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

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