Question

我正在处理Grails项目，并尝试突出显示一个表行，如果它没有所有匹配的记录。

如果<tr>在该行中不匹配，我想突出显示<td>。我是jQuery的新手，在同一行中比较<td>时遇到了困难。

$('table').on('mouseover', 'tr', function() {
   var textToMatch = $(this).text();

jsfiddle example

第1行和第4行不应该突出显示，但它的反面意思。

例如 - 第一行的所有数字都与7654321相同。所以没关系，但第二行和第三行在同一行中有不同的数字，因此应突出显示。

Answer 1

请告诉我这是您要找的内容：jsFiddle。

我更改了您的textToMatch，以便从第一个<td>获取文字：

var textToMatch = $(this).find('td:first').text();

然后，我没有迭代所有<tr>元素，而是更改了代码，以迭代行中的<td>元素（$(this).find('td').each而不是$('tr').each）。

最后，在添加!==类之前，我更改了文本比较以检查文本是否不同（===）而不是相同（matching）。请注意，由于我现在正在迭代<td>元素$(this).parent().addClass('matching')，现在已应用于<tr>而不是<table>。

Answer 2

函数isValid将收集并比较单行中的所有值。如果所有值都相同则返回true，否则返回false。

$(function() {

    function isValid( $tr ) {
        return $tr
                .find( 'td' )
                .map( function() {
                    return $(this).text();
                })
                .get()
                .reduce( function(a, b) {
                    return ( a === b ) ? a : false; 
            }) !== false ; 
    }

    $('table').hover(
        function() {
            $( this ).find( 'tr' ).each( function() {
                if ( !isValid( $(this) ) ) $(this).addClass('matching');               
            });
        }, function() {          
            $( this ).find( 'tr' ).removeClass('matching'); 
        });

});

FIDDLE

如果有任何值不同，则突出显示

2 个答案: