CODEWITHSUNDEEP
jqueryrowalternating
user2430338
user2430338

Reputation: 89

change colour of alternating rows in query

I have this table with even rows coloured grey (odd rows are white):

$("td").filter(function(){ return $(this).text() == '1'; }).text('One');
$("td").filter(function(){ return $(this).text() == '2'; }).text('Two');
$("td").filter(function(){ return $(this).text() == '3'; }).text('Three');
$("td").filter(function(){ return $(this).text() == '4'; }).text('Four');
$("td").filter(function(){ return $(this).text() == '5'; }).text('Five');
$("td").filter(function(){ return $(this).text() == '6'; }).text('Six');

I then removed row 3 like this:

$("tr:contains('3')").hide();

Now my table has rows 2 and 4 together coloured grey. How do I retain alternate row colours despite removing a row?

Here's my HTML code:

<html>
<head>
    <link type="text/css" rel="stylesheet" href="css.css" />
<script src="jquery-1.10.1.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() == '1'; }).text('One');
        $("td").filter(function(){ return $(this).text() == '2'; }).text('Two');
        $("td").filter(function(){ return $(this).text() == '3'; }).text('Three');
        $("td").filter(function(){ return $(this).text() == '4'; }).text('Four');
        $("td").filter(function(){ return $(this).text() == '5'; }).text('Five');
        $("td").filter(function(){ return $(this).text() == '6'; }).text('Six');

            $("tr:contains('3')").hide();
            }
        }   
        xmlhttp.open("POST", "process_this_table.php", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send();       
    }
    </script>
</head>

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

</html>

And here's my CSS:

body{
  padding: 100px;
  margin: 20;
  font: 2em Times New Roman, Helvetica, sans-serif;
}
table{
  border-collapse: separate;
  border-radius: 10px 10px 10px 10px;
  border: 1px solid red;
  width: 600px;
  box-shadow: -20px 20px 20px #313030;
}
td {
  padding: 0.4em;
  border: 1px solid red;
}

I presume you'll tell me to add attributes for tr and would probably tell me to insert the code you provided right? If so, can you please provide the syntax. I know you can't insert jquery to css.

Tue. Jun. 4, 2013 7:50pm EST This is the table structure inside the process_this_table.php:

<?php
echo "<table>"; 
    $rows=array('row 1','row 2','row 3');
    $columns=array('column 1','column 2','column 3');
    $rlength=count($rows);
    $clength=count($columns);
    for($i=0;$i<$rlength;$i++){
    echo "<tr>";        
    if($i%2){
        echo "<td style=\"background-color: rgb(212,212,212);\">".$rows[$i]."</td>";
    for($j=1;$j<$clength;$j++)
        echo "<td style=\"background-color: rgb(212,212,212);>blah blah</td>";
    }
    else{
        echo "<td>".$rows[$i]."</td>"; 
    for($j=1;$j<$clength;$j++)
        echo "<td>blah blah</td>"; 
    }
    echo "</tr>";
    }
echo "</table>"; 
?>

This process_this_table.php is from a remote server so I can't modify the alternating grey colour (212,212,212) on even rows. For my purpose, I would prefer specifying which row I want to change colour instead of doing odd or even, like this $("tr:nth-child(2)").css("background-color", "lightblue");. Why does that code not work but specifying an odd row like $("tr:nth-child(1)").css("background-color", "lightblue"); does?

Wed. Jun. 5, 2013 12:50pm EST All is well thanks to all of you, especially Karl-Andre. I'd like one more thing, though. How do I re-arrange the rows so row 4 will be on row 1 for example? Thanks in advance.

Upvotes: 0

Views: 1456

Answers (3)

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

I am completing luk2302's answer.

You need to itterate through tr but change td's css since they are the one with the style tag.

$('tr:visible').each(function(i){
    $(this).find('td').css('background-color', i%2 ? 'red':'grey');
})

Hope it work.

Upvotes: 0

David Ziemann
David Ziemann

Reputation: 970

You can use the jQuery :odd selector to correctly set the colors.

Documentation here.

$("tr:odd").css("background-color", "#bbbbff");

Upvotes: 1

luk2302
luk2302

Reputation: 57124

And what about this solution, i think you could use it for your purpose:

$('tr').each(function(i) {
  if (i % 2)
    $(this).css('background-color', 'red');
  else 
    $(this).css('background-color', 'gray');
});

http://jsfiddle.net/TQZfP/1/

Upvotes: 1

Related Questions