[SOLVED] php Zebra Tables...

[Mr Echo]

Hi everyone, I'm new around here.  I just recently got started working with php so you guys will probably see me around quite a bit.  Currently I having a problem producing Zebra tables. I have no clue why it doesn't work. I think it could be a php code problem but I'm not sure. The zebra tables I'm working with uses jquery & CSS.  Maybe someone can look over my coding to see if I've done something incorrect.

 

Here's my php coding:

  <?php
  echo '<script type="text/javascript" src="js/jquery-1.3.2.min.js">$(document).ready(function() {
    $(".thead tr:even").addClass("alt");
});</script>';
  echo '<table>';
  echo '<thead><tr><th><U>Name</U></th><th><U>Name2</U></th><th><U>Name3</U></th><th><U>Name4</U></th><th><U>Name5</U></th><th><U>Name6</U></th></tr></thead>';
  while ($row = mysqli_fetch_array($data)) { 
    // Display the name data
    echo '<thead><tr class="namerow"><td><strong>' . $row['name'] . '</strong></td>';
    echo '<td>' . $row['name2'] . '</td>';
    echo '<td>' . $row['name3'] . '</td>';
    echo '<td>' . $row['name4'] . '</td>';
    echo '<td>' . $row['name5'] . '</td>';
    echo '<td>' . $row['name6'] . '</td>';
    echo '</td></tr></thead>';
  }
  echo '</table>';
  
  ?>

 

Here's the css coding:

  thead tr th {
                background-color: #E4FD75;
                color: #000;
            }
        thead tr {
                background-color: #FFFFFF;
                color: #000;
            }
            
         thead tr.alt thead td {
                background-color: #9B9B9B;
            }
            
         thead tr.over td, thead tr:hover td {
                background-color: #76D5F1;
            }
  .alt {
  	background-color: #9B9B9B;
  }

[Alex]

Can you be a little more specific about exactly what's not working?

 

Edit: One thing I see straight off the bat is that $data isn't even defined, or did you just not copy and paste the whole thing?

[Mr Echo]

What's not working is the zebra colored rows. The rows colors and the rows hover colors work but the rows don't do the zebra coloring. Right now the row colors are: white,white, white, white, and so on. but it should be colored as white,grey,white,grey,white,grey and so on. It seems like to me that the jquery script isn't being read because it doesn't change colors between each row.

[Mr Echo]

 

 

Edit: One thing I see straight off the bat is that $data isn't even defined, or did you just not copy and paste the whole thing?

 

I didn't copy the whole thing because I didn't think it was necessary. Sorry. 

 

Here it is though:

<?php
  require_once('namevars.php');
  require_once('openvars.php');

  // Connect to the database 
  $dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);

  // Retrieve the names from MySQL
  $query = "SELECT * FROM namedb ORDER BY name DESC, date ASC";
  $data = mysqli_query($dbc, $query);

[Alex]

I'm not specifically familiar with that jQuery function, but here's the way that I would do it:

 

echo '<table>';
  echo '<thead><tr><th><U>Name</U></th><th><U>Name2</U></th><th><U>Name3</U></th><th><U>Name4</U></th><th><U>Name5</U></th><th><U>Name6</U></th></tr></thead>';
  $i = 0;
  while ($row = mysqli_fetch_array($data)) { 
    $class = ($i % 2) ? "class='alt'" : NULL;
    echo '<thead><tr ' . $class . '><td><strong>' . $row['name'] . '</strong></td>';
    echo '<td>' . $row['name2'] . '</td>';
    echo '<td>' . $row['name3'] . '</td>';
    echo '<td>' . $row['name4'] . '</td>';
    echo '<td>' . $row['name5'] . '</td>';
    echo '<td>' . $row['name6'] . '</td>';
    echo '</td></tr></thead>';
  }
  echo '</table>';

[Mr Echo]

I'm not specifically familiar with that jQuery function, but here's the way that I would do it:

 

echo '<table>';
  echo '<thead><tr><th><U>Name</U></th><th><U>Name2</U></th><th><U>Name3</U></th><th><U>Name4</U></th><th><U>Name5</U></th><th><U>Name6</U></th></tr></thead>';
  $i = 0;
  while ($row = mysqli_fetch_array($data)) { 
    $class = ($i % 2) ? "class='alt'" : NULL;
    echo '<thead><tr ' . $class . '><td><strong>' . $row['name'] . '</strong></td>';
    echo '<td>' . $row['name2'] . '</td>';
    echo '<td>' . $row['name3'] . '</td>';
    echo '<td>' . $row['name4'] . '</td>';
    echo '<td>' . $row['name5'] . '</td>';
    echo '<td>' . $row['name6'] . '</td>';
    echo '</td></tr></thead>';
  }
  echo '</table>';

 

Thx, I'll give it a try.

[redarrow]

what it do that jquery let us no or example looks interesting bro.

[Alex]

what it do that jquery let us no or example looks interesting bro.

Actually taking a look at it this time it's pretty clear what it does if you have a brief understanding of jQuery.

 

You would know that $() is a selector. So $(".thead tr:even").addClass("alt"); basically means it takes all of the tr children of the thread elements that are even and add a class called alt to those elements.

[Mr Echo]

I'm trying to make a table like this:

 

Oh, by the way AlexWD...it didn't work  :-\

 

Here is the tut I was trying to follow but it's just not working.

http://forum.codecall.net/javascript/14364-jquery-zebra-striped-table.html

[Alex]

Forget about my method, use the jQuery that you were originally using.

 

Give your table a class name, eg:

 

<table class="someClass">

 

then in your jQuery:

 

$(".someClass tr:even").addClass("alt");

[redarrow]

That looks good, but i thort css would do that anyway...

 

 

come on alex you no the stuff well show us you the man.....

 

lol

 

pmsl

 

[Mr Echo]

Forget about my method, use the jQuery that you were originally using.

 

Give your table a class name, eg:

 

<table class="someClass">

 

then in your jQuery:

 

$(".someClass tr:even").addClass("alt");

 

Do I echo the jquery script part?? for example

  echo '<table class=zebra">';
  echo '<script type="text/javascript" src="js/jquery-1.3.2.min.js">$(document).ready(function() {
    $(".zebra tr:even").addClass("alt");
});</script>';

[redarrow]

alex don't you slip on to that web site, come on, php is your game lol, let's not lose you now?

 

what the point in that jquery code css version even better....

 

the use of jquery is to make a application of you're own like a desktop application.

 

if this was written correctly in css it would work perfect and cross browser....

 

 

 

 

[Mr Echo]

alex don't you slip on to that web site, come on, php is your game lol, let's not lose you now?

 

lmao 

[Alex]

Forget about my method, use the jQuery that you were originally using.

 

Give your table a class name, eg:

 

<table class="someClass">

 

then in your jQuery:

 

$(".someClass tr:even").addClass("alt");

 

Do I echo the jquery script part?? for example

  echo '<table class=zebra">';
  echo '<script type="text/javascript" src="js/jquery-1.3.2.min.js">$(document).ready(function() {
    $(".zebra tr:even").addClass("alt");
});</script>';

 

You could, but it would be a better idea to put that script inside of your header. And Woah, just noticed a stupid mistake..

 

You should have something like this in your header:

 

<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="javascript"> 
$(document).ready(function() {
    $(".zebra tr:even").addClass("alt");
});   
</script>
</head>

 

Edit: Also make sure that you actually have the jQuery library loaded and in the correct location..

[Mr Echo]

Forget about my method, use the jQuery that you were originally using.

 

Give your table a class name, eg:

 

<table class="someClass">

 

then in your jQuery:

 

$(".someClass tr:even").addClass("alt");

 

Do I echo the jquery script part?? for example

  echo '<table class=zebra">';
  echo '<script type="text/javascript" src="js/jquery-1.3.2.min.js">$(document).ready(function() {
    $(".zebra tr:even").addClass("alt");
});</script>';

 

You could, but it would be a better idea to put that script inside of your header. And Woah, just noticed a stupid mistake..

 

You should have something like this in your header:

 

<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="javascript"> 
$(document).ready(function() {
    $(".zebra tr:even").addClass("alt");
});   
</script>
</head>

 

Edit: Also make sure that you actually have the jQuery library loaded and in the correct location..

 

Your a genius!!! It works now!!! YES, finally.... I added that script to the header before but it didn't work so I tried to echo it but I never got it working but it works now. Thanks so much AlexWD.  Your a Life/Time Saver. I hope to c-ya around. 

[Alex]

Np Just remember to press the "Topic Solved" button on the bottom left.

[redarrow]

Your a genius!!! It works now!!! YES, finally.... I added that script to the header before but it didn't work so I tried to echo it but I never got it working but it works now. Thanks so much AlexWD.  Your a Life/Time Saver. I hope to c-ya around. 

 

how else will u earn money?

 

hahahahahaha joke