Jquery and PHP alternate row colour

PHPDevil · June 28, 2012

Hey guys, I'm having some problems with MCCODES and incorporating Jquery into it. Hopefully someone can help. Be much appreciated!

The jquery code I am using is:

$(document).ready(function()

{

$("table#idtable1 tr:even").css("background-color", "#F4F4F8");

$("table#idtable1 tr:odd").css("background-color", "#EFF1F1");

});

</script>

It's been placed towards the bottom of the head section on header.php

Now I want it to work on Halloffame.php so I have used:

<table width=75% cellspacing=1 class=tablehof id=table1 ><tr style='background:gray'> <th>Rank</th> <th>User</th> <th>Level</th> </tr>";

I want it to work on one table.

However I haven't recieved any luck! Is anyone able to see where I have gone wrong :(

HauntedDawg · June 28, 2012

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
$(document).ready(function()
{
$("#idtable1 tr:even").css("background-color", "#F4F4F8");
$("#idtable1 tr:odd").css("background-color", "#EFF1F1");
});
</script>

You are making your mistake by the <script> tag. You can't pull from a "src"(source file) and then have javascript run after it. So, do this.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("#idtable1 tr:even").css("background-color", "#F4F4F8");
$("#idtable1 tr:odd").css("background-color", "#EFF1F1");
});
</script>

PHPDevil · June 28, 2012

i did what u said and have :

$(document).ready(function()

{

$("table#idtable1 tr:even").css("background-color", "#F4F4F8");

$("table#idtable1 tr:odd").css("background-color", "#EFF1F1");

});

</script>

But still no luck

Djkanna · June 28, 2012

"table#idtable1" = "table#table1"

JakeB · June 29, 2012

You shouldn't need jQuery to do this.

just do

table #idtable1 tr:even{
    background-color: #F4F4F8;
}
table #idtable1 tr:odd{
    background-color: #EFF1F1;
}

Spudinski · June 29, 2012

You are making your mistake by the <script> tag. You can't pull from a "src"(source file) and then have javascript run after it. So, do this.
I concur...

PHPDevil · June 29, 2012

i still haven't had any luck and have tried all the suggestions above :(

Dayo · June 29, 2012

why dont you just use PHP something like this

if ($i % 2 == 0) {
$color = '#XXXXXX';
} else {
$color = '#XXXXXX';
}

echo '<tr style="background-color:#'.$color.'"> ....... </tr>';

PHPDevil · June 29, 2012

Hi dayo,

I tried what you suggested and came to this

if ($i % 2 == 0) {
$color = '#FFFFFF';
} else {
$color = '#000000';
}

and for the actual table row I have used

print "<tr style=background-color:#'.$color.'> <td>$t$p$et</td> <td>$t{$r['gangPREF']} {$r['username']} [{$r['userid']}]$et</td> <td>$t{$r['level']}$et</td> </tr>";

still haven't managed to get it. :(

the code for that entire table is

function hof_level()
{
global $db,$ir,$c,$userid, $myf;
print "Showing the 50 users with the highest levels<br />

<table width=75% cellspacing=1 class=tablehof><tr style='background:gray'> <th>Rank</th> <th>User</th> <th>Level</th> </tr>";
$q=$db->query("SELECT u.*,g.* FROM users u LEFT JOIN gangs g ON g.gangID=u.gang WHERE u.user_level != 0 $myf ORDER BY level DESC,userid ASC LIMIT 50");
$p=0;
while($r=$db->fetch_row($q))
{
$p++;
if($r['userid'] == $userid) { $t="<b><font color=red>";$et="</font></b>"; } else { $t="";$et=""; }
print "<tr style=background-color:#'.$color.'> <td>$t$p$et</td> <td>$t{$r['gangPREF']} {$r['username']} [{$r['userid']}]$et</td> <td>$t{$r['level']}$et</td> </tr>";
}
print "</table></div><div><img src='images/generalinfo_btm.jpg' alt='' /></div><br></div></div></div></div></div>";
}

Dayo · June 30, 2012

change

if ($i % 2 == 0) {
$color = '#FFFFFF';
} else {
$color = '#000000';
}

to

if ($p % 2 == 0) {
$color = '#FFFFFF';
} else {
$color = '#000000';
}

PHPDevil · June 30, 2012

Made the change dayo!

still no luck O,o.

I bet im missing something ever so small =/

Danny696 · June 30, 2012

Not too sure why the CSS someone posted didn't work, but try this:

if ($p % 2 == 0) {
$color = 'FFFFFF';
} else {
$color = '000000';
}

Djkanna · June 30, 2012

And;

print "<tr style=background-color:#'.$color.'>

('. .') shouldn't be there.

Dayo · June 30, 2012

ahh what DJK+danny said lol how did i miss that

PHPDevil · June 30, 2012

I made the changes. Appreciate the help aswell but still the colour isn't changing

function hof_level()
{
global $db,$ir,$c,$userid, $myf;
if ($p % 2 == 0) {
$color = 'FFFFFF';
} else {
$color = '000000';
}
print "Showing the 50 users with the highest levels

<table width=75% cellspacing=1 class=tablehof><tr style='background:gray'> <th>Rank</th> <th>User</th> <th>Level</th> </tr>";
$q=$db->query("SELECT u.*,g.* FROM users u LEFT JOIN gangs g ON g.gangID=u.gang WHERE u.user_level != 0 $myf ORDER BY level DESC,userid ASC LIMIT 50");
$p=0;
while($r=$db->fetch_row($q))
{
$p++;
if($r['userid'] == $userid) { $t="<b><font color=red>";$et="</font></b>"; } else { $t="";$et=""; }
print "<tr style=background-color:#'.$color.'>
<td>$t$p$et</td> <td>$t{$r['gangPREF']} {$r['username']} [{$r['userid']}]$et</td> <td>$t{$r['level']}$et</td> </tr>";
}
print "</table></div><div><img src='images/generalinfo_btm.jpg' alt='' /></div></div></div></div></div></div>";
}

bluegman991 · June 30, 2012

The code below should work. You didn't do as djk mentioned and also you had your color changer if statement in wrong place.

[noparse]function hof_level()
{
global $db, $ir, $c, $userid, $myf;
print "Showing the 50 users with the highest levels
	<table width=75% cellspacing=1 class=tablehof><tr style='background:gray'> <th>Rank</th> <th>User</th> <th>Level</th> </tr>";
$q = $db->query("SELECT u.*,g.* FROM users u LEFT JOIN gangs g ON g.gangID=u.gang WHERE u.user_level != 0 $myf ORDER BY level DESC,userid ASC LIMIT 50");
$p = 0;
while ($r = $db->fetch_row($q))
{
	$p++;
	if ($p % 2 == 0)
	{
		$color = 'FFFFFF';
	}
	else
	{
		$color = '000000';
	}

	if ($r['userid'] == $userid)
	{
		$t = "<b><font color=red>";
		$et = "</font></b>";
	}
	else
	{
		$t = "";
		$et = "";
	}
	print "<tr style=background-color:#$color>
	<td>$t$p$et</td> <td>$t{$r['gangPREF']} {$r['username']} [{$r['userid']}]$et</td> <td>$t{$r['level']}$et</td> </tr>";
}
print "</table></div><div><img src='images/generalinfo_btm.jpg' alt='' /></div></div></div></div></div></div>";
}[/noparse]

Edited June 30, 2012 by bluegman991

SilverStar · June 30, 2012

Try this:

function hof_level()
{
global $db,$ir,$c,$userid, $myf;
print "Showing the 50 users with the highest levels

<table width=75% cellspacing=1 class=tablehof><tr style='background:gray'> <th>Rank</th> <th>User</th> <th>Level</th> </tr>";
$q=$db->query("SELECT u.*,g.* FROM users u LEFT JOIN gangs g ON g.gangID=u.gang WHERE u.user_level != 0 $myf ORDER BY level DESC,userid ASC LIMIT 50");
$p=0;
while($r=$db->fetch_row($q))
{
$p++;
if($r['userid'] == $userid) { $t="<b><font color=red>";$et="</font></b>"; } else { $t="";$et=""; }
if ($col=="0"){ $color="FFFFFF"; $col="1"; }else{ $color="000000"; $col="0"; }
print "<tr style=background-color:#$color>
<td>$t$p$et</td> <td>$t{$r['gangPREF']} {$r['username']} [{$r['userid']}]$et</td> <td>$t{$r['level']}$et</td> </tr>";
}
if ($color=="FFFFFF"){ $color="000000"; $col="1"; }else{ $color="FFFFFF"; $col="0"; }
print "</table></div><div><img src='images/generalinfo_btm.jpg' alt='' /></div></div></div></div></div></div>";
}

rulerofzu · June 30, 2012

$bgcolor = ($bgcolor == "white") ? "#232846" : "white";

Works.

PHPDevil · June 30, 2012

The code below should work. You didn't do as djk mentioned and also you had your color changer if statement in wrong place.

[noparse]function hof_level()
{
global $db, $ir, $c, $userid, $myf;
print "Showing the 50 users with the highest levels
	<table width=75% cellspacing=1 class=tablehof><tr style='background:gray'> <th>Rank</th> <th>User</th> <th>Level</th> </tr>";
$q = $db->query("SELECT u.*,g.* FROM users u LEFT JOIN gangs g ON g.gangID=u.gang WHERE u.user_level != 0 $myf ORDER BY level DESC,userid ASC LIMIT 50");
$p = 0;
while ($r = $db->fetch_row($q))
{
	$p++;
	if ($p % 2 == 0)
	{
		$color = 'FFFFFF';
	}
	else
	{
		$color = '000000';
	}

	if ($r['userid'] == $userid)
	{
		$t = "<b><font color=red>";
		$et = "</font></b>";
	}
	else
	{
		$t = "";
		$et = "";
	}
	print "<tr style=background-color:#$color>
	<td>$t$p$et</td> <td>$t{$r['gangPREF']} {$r['username']} [{$r['userid']}]$et</td> <td>$t{$r['level']}$et</td> </tr>";
}
print "</table></div><div><img src='images/generalinfo_btm.jpg' alt='' /></div></div></div></div></div></div>";
}[/noparse]

Thanks mate. I thought DJK had replied with the correct statement. Should have read more closely =/

I used the above code. It now happily changes from white to black!

rulerofzu · July 1, 2012

Thats a whole lotta code for something you can achieve with what I posted above which is what I use on my game for alternate background colours in tables ;)

Spudinski · July 6, 2012

Thats a whole lotta code for something you can achieve with what I posted above which is what I use on my game for alternate background colours in tables ;)

Even yours is "a whole lotta code" to what is the shortest way.

rulerofzu · July 6, 2012

Which would be?

lucky3809 · July 6, 2012

Which would be?

What you posted...

I use same thing you do, got it from this forum I believe POG posted it, but i may be wrong...

You can also use this method

add to css file:

.alt:nth-child(even) {background: red}

.alt:nth-child(odd) {background: blue}

then in your tr tags add class="alt"

Edited July 6, 2012 by lucky3809

rulerofzu · July 6, 2012

That is still more code. ;)

Sign In

Jquery and PHP alternate row colour

Recommended Posts

PHPDevil

HauntedDawg

PHPDevil

Djkanna

JakeB

Spudinski

PHPDevil

Dayo

PHPDevil

Dayo

PHPDevil

Danny696

Djkanna

Dayo

PHPDevil

bluegman991

SilverStar

rulerofzu

PHPDevil

rulerofzu

Spudinski

rulerofzu

lucky3809

rulerofzu

Join the conversation

Browse

Activity

Hosting