Question

我的行有以下方式。

<table id="tblInbox">
<tbody>    
    <tr class='active'><td>Daily Price</td><td>1</td><td>Santosh</td></tr>
    <tr class='active'><td>Daily Price</td><td>2</td><td>Star</td></tr>
    <tr><td>Weekly Price</td><td>3</td><td>Zakeer</td></tr>
    <tr><td>Weekly Price</td><td>4</td><td>Ubed</td></tr>
    <tr><td>Weekly Price</td><td>5</td><td>xyz/td></tr>
    <tr><td>Daily Price</td><td>6</td><td>India</td></tr>
    <tr><td>Daily Price</td><td>7</td><td>Australia</td></tr>
</tbody>
</table>

我将使用

显示具有“活动”类的行

function displayActiveRows(){ // Displaying active rows
    $("#tblInbox tbody tr").each( function(){ 
    if($(this).hasClass('active')) { // If the row has class.
        console.log("has class");
        $(this).show(); // Display the row.
    } else {                
        $(this).hide(); // Hide the row.
    }       
    });
}

按下“下一步”按钮，我想通过将类删除到现有行，将类添加到仅具有第一个td值为“每日价格”的下一个2 0r 10（无论计数是多少）行。我的代码是这样的。

$(document).on('click','#nextPage',function(){ // Clicking Next Button.
    // Remove class to already existing class rows.
    $('.active').removeClass('active');     
    // Confused here. 
 });

你能建议我，伙计们？

Answer 1

您可以使用:first-child和:contains

<强> Live Demo

$(document).on('click','#nextPage',function(){ // Clicking Next Button.  
    $('.active :first-child:contains("Daily Price")').removeClass('active').addClass('inactive'); 
});

要检查tr类，可以在选择器中使用tr而不是.active

<强> Live Demo

$(document).on('click','#nextPage',function(){ // Clicking Next Button.  
    $('tr :first-child:contains("Daily Price")').removeClass('active').addClass('inactive'); 
});

要切换需要使用每个行迭代的类beteen行。

<强> Live Demo

$(document).on('click','#nextPage',function(){ // Clicking Next Button.  
    $('tr :first-child:contains("Daily Price")').each(function(){       
       if($(this).parent()[0].className === '')
           $(this).parent().addClass('active');
        else
        if($(this).parent()[0].className == 'active')        
           $(this).parent().removeClass('active');  

    });
});

您也可以使用条件操作符

<强> Live Demo

$(document).on('click','#nextPage',function(){ // Clicking Next Button.  
    $('tr :first-child:contains("Daily Price")').each(function(){       
        $(this).parent()[0].className = $(this).parent()[0].className === "active" ? "" : "active";
    });
});

Answer 2

试试这个

$("#tblInbox tbody tr").children("td:contains('Daily Price')").parent().addClass('active')

使用jquery基于td值添加类

2 个答案: