CODEWITHSUNDEEP
jqueryhtml-table
user2430338
user2430338

Reputation: 89

Alternating row colors with some rows hidden

3rd attempt. I have a table pulled from a remote server and I hid some rows using $('tr:nth-child(row#)').hide();. Now the table row colors do not alternate. Also, table cells change color depending on what is in the cell. If a cell value is 81-100% it's green, at 61-80% it's orange, and at 0-60% it's red. Here's my jquery:

$(document).ready(function(){
    $('tr:even').addClass('even'); $('tr:odd').addClass('odd');
});

var $trs = $('tr').removeClass('even odd').filter(":visible");
$trs.filter(':even').addClass('even');
$trs.filter(':odd').addClass('odd');

Here's my CSS: tr.odd td{ background-color: #FFFFFF;} tr.even td{background-color: #C0C0C0;}

The above codes actually alternate the rows, but it removes the colors of the cells. Whereas tr.odd{ background-color: #FFFFFF;} tr.even{background-color: #C0C0C0;} retains the colors of the cells but removes the alternating colors. Please help.

Here's my entire HTML:

<html>
    <head>
    <link type="text/css" rel="stylesheet" href="css.css" />
        <script src="jquery-1.10.1.min.js"></script>
    <script language="Javascript"> 
        function View(){
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("datatable").innerHTML=xmlhttp.responseText;        

                $("td").filter(function(){ return $(this).text()=='R1';}).text('Row1'); //white
                $("td").filter(function(){ return $(this).text()=='R2';}).text('Row2'); //grey
                $('tr:nth-child(3)').hide();                                            //white
                $("td").filter(function(){ return $(this).text()=='R4';}).text('Row4'); //grey
                $('tr:nth-child(5)').hide();                                            //white
                $("td").filter(function(){ return $(this).text()=='R6';}).text('Row6'); //grey
                $("td").filter(function(){ return $(this).text()=='R7';}).text('Row7'); //white

                // Alternate visible rows to white and grey
                $(document).ready(function(){
                    $('tr:even').addClass('even');
                    $('tr:odd').addClass('odd');
                });

                var $trs = $('tr').removeClass('even odd').filter(":visible");
                $trs.filter(':even').addClass('even');
                $trs.filter(':odd').addClass('odd');
            }
        }
        var parameters = "search="+"rog_en_vo_ts_t1";
        xmlhttp.open("POST", "http://process_this_table.php", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send(parameters);         
    }
    </script>
    </head>

<body onload="View();" >
    <div id="datatable" align="center"></div>
</body>
</html>

And here's my CSS:

tr.odd{background-color: #FFFFFF;} 
tr.even{background-color: #C0C0C0;}

Please help.

Upvotes: 4

Views: 3782

Answers (1)

user887515
user887515

Reputation: 804

I think this might be what you are looking for.

Click a row to remove it. The alternating colours are kept and cells show accordingly based upon their value.

The key for your alternating rows is to ask for visible before odd or even.

http://jsfiddle.net/WWFUr/

function setRowColours(){
    $('table tr:visible:odd').css({"background": "grey"});
    $('table tr:visible:even').css({"background": "lightgrey"});
    $('td.percentage').each(function(){
        if($(this).html() > 80){
            $(this).css({"background": "green"});
        } else if($(this).html() <= 60){
            $(this).css({"background": "red"});
        } else{
            $(this).css({"background": "orange"});            
        }
    });
}

$(document).ready(function(){
    setRowColours();
});

$('tr').click(function(){
    $(this).hide();
    setRowColours(); 
});

Upvotes: 3

Related Questions