jquery 根据列值高亮行

标签 jquery html css

您好,我希望有人可以帮助我调整此 JQuery 代码,以便它突出显示整个数据行,而不仅仅是包含值“N”的单元格。我试图将代码应用于表格行,但它仍然只突出显示包含“N”值的单元格的背景颜色,因为我需要突出显示整个表格行。有人有什么建议吗?

    <html>
    <head> 
    <script type="text/javascript" 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> 
    <script type="text/javascript">  

    $(document).ready(function(){
                       $('#table_id tr.y_n td').each(function(){
                                                           if ($(this).text() == 'N') {
                                                               $(this).css('background-color','#f00');
                                                               }
                                                               }); 
                       });

    </script>

    </head>
    <body>
    <table id="table_id">
      <tr><th>Question</th><th>Y/N?</th></tr>  
      <tr><td>I am me.</td><td>Y</td></tr>  
      <tr class="y_n"><td>N</td><td>Y</td></tr>  
      <tr><td>I am not sure.</td><td class="y_n">Y</td></tr>  
      <tr><td>This is a table.</td><td class="y_n">Y</td></tr>
     </table>  

     </body> 
     </html> 

最佳答案

你只需要添加一个closest在你的css之前打电话调用:

if ($(this).text() == 'N') {
    $(this).closest('tr').css('background-color','#f00');
}

演示:http://jsfiddle.net/ambiguous/KSCyC/

closest 函数遍历 DOM 以找到与选择器匹配的最近祖先。

你也可以使用 parent :

if ($(this).text() == 'N') {
    $(this).parent().css('background-color','#f00');
}

演示:http://jsfiddle.net/ambiguous/RdGEy/

关于jquery 根据列值高亮行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7656860/

相关文章:

javascript - Div 不知道屏幕大小调整

javascript - 如何存储函数或函数的值并在浏览器刷新后重用它们

javascript - 如何在 Adob​​e Muse 中将 iframe 滚动到顶部?

html - 在我的页面上获得额外的尺寸

php - VIEWPORT 不适用于重定向的 URL

javascript - 剥离非数字值不起作用

javascript - JQuery .click() 不选择元素

javascript - 回车键上的输入更改事件在 IE 中不起作用

html - css比例背景图片

javascript - 使用按钮更改多个div的边框颜色