zebra stripe dynamic table for ie8

mdemetri2 · May 23, 2013

Ok, so I have been able to get 'zebra striped' rows workin in google chrome, but uses CSS3 which isnt supported in ie8. Is there a method that works in IE8?

Jessica · May 23, 2013

There are lots. You could do your striping in PHP. If your table is dynamic, you could use jQuery. Bootstrap.js has good zebra striping.

mdemetri2 · May 23, 2013

Thanks for the reply Jessica. This is the latest bit of code I have been playing with that was supposed to work in IE8...:


<?php require_once('Connections/Connection1.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

mysql_select_db($database_Connection1, $Connection1);
$query_recordset1 = "select * from users";
$recordset1 = mysql_query($query_recordset1, $Connection1) or die(mysql_error());
$row_recordset1 = mysql_fetch_assoc($recordset1);
$totalRows_recordset1 = mysql_num_rows($recordset1);
?>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><script type="text/javascript">

$(function() {    
    //
    $('.tableClass tr:even').addClass('even');
    $('.tableClass tr:odd').addClass('odd');
});
</script>

<style type="text/css">

.tableClass{
}
.odd { background-color: blue; }
.even { background-color: white; }

</style>



<html>
    <head>
    <title>How To Create Zebra Striped Table</title>
</head>
<body>

<table width="600" border="0">
  <tr>
    <td> </td>
  </tr>
  <?php do { ?>
    <tr>
      <td><span class="tableClass"> <?php echo $row_recordset1['userid']; ?></span></td>
    </tr>
    <?php } while ($row_recordset1 = mysql_fetch_assoc($recordset1)); ?>
</table>
<p class="tableClass"> </p>
</body>
</html>
<?php
mysql_free_result($recordset1);
?>

any ideas where it is wrong? this isnt actually working in chrome either.... $:-\$

Jessica · May 23, 2013

It shouldn't work in any browser, there's nothing to actually put the stripes on the rows.

A. That should be a while loop, not a do-while.

B. You should have a variable to hold the number of rows, then alternate the class based on that. Here's a simple example:

<?php
$num = 0;
while ($row_recordset1 = mysql_fetch_assoc($recordset1)){
    $num++;
    $class = $num%2 ? 'even' : 'odd';
    echo '<tr class="'.$class.'">';
    echo '<td>Row Data Here</td>';
    echo '</tr>';
}
?>

Edit: I see the JavaScript now that was supposed to do it. I strongly recommend using PHP instead, unless you dynamically alter the table with JS later. Your JS isn't working because you're putting the tableClass class on a span, not the table row. So .tableClass tr never exists.

Edited May 23, 2013 by Jessica

mdemetri2 · May 23, 2013

Ok, it seems I chose a poor example from my google search results, apologies. So, can I use your example instead, remove my use of .tableClass and keep the .odd and .even ones? Also, do I replace Row Data Here with echo $row_recordset1['userid'];

mdemetri2 · May 23, 2013

Ok, I have gone back to a simple table, that is populated by a query. Jessica - please would you be able to provide some pointers on where I need to adapt your example to make the following alternate the colour on the rows:


<?php require_once('Connections/Connection1.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

mysql_select_db($database_Connection1, $Connection1);
$query_recordset1 = "select * from users";
$recordset1 = mysql_query($query_recordset1, $Connection1) or die(mysql_error());
$row_recordset1 = mysql_fetch_assoc($recordset1);
$totalRows_recordset1 = mysql_num_rows($recordset1);
?>
<style type="text/css">
.odd { background-color: blue; }
.even { background-color: white; }
</style>



<html>
    <head>
    <title>How To Create Zebra Striped Table</title>
</head>
<body>
<table width="600" border="0">
  <tr>
    <td>User</td>
  </tr>
  <?php do { ?>
    <tr>
      <td><?php echo $row_recordset1['userid']; ?></td>
    </tr>
    <?php } while ($row_recordset1 = mysql_fetch_assoc($recordset1)); ?>
</table>
</body>
</html>
<?php
mysql_free_result($recordset1);
?>

Eiseth · May 23, 2013

put an initializer here

<?php $count = 0; do { ?>

Then on every row, check if it is odd or even

<td class="<?php echo (($count % 2) == 0) ? 'even' : 'odd'; ?>"><?php echo $row_recordset1['userid']; ?></td>

Edited May 23, 2013 by Eiseth

mdemetri2 · May 23, 2013

many thanks for the reply and help Eiseth, I now have the following code:

<?php require_once('Connections/Connection1.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

mysql_select_db($database_Connection1, $Connection1);
$query_recordset1 = "select * from users";
$recordset1 = mysql_query($query_recordset1, $Connection1) or die(mysql_error());
$row_recordset1 = mysql_fetch_assoc($recordset1);
$totalRows_recordset1 = mysql_num_rows($recordset1);
?>
<style type="text/css">
.odd { background-color: blue; }
.even { background-color: white; }
</style>
<html>
    <head>
    <title>How To Create Zebra Striped Table</title>
</head>
<body>
<table width="600" border="0">
  <tr>
    <td>User</td>
  </tr>
  <?php $count = 0; do { ?>
    <tr>
      <td class="<?php echo (($count % 2) == 0) ? 'even' : 'odd'; ?>"><?php echo $row_recordset1['userid']; ?></td>
    </tr>
    <?php } while ($row_recordset1 = mysql_fetch_assoc($recordset1)); ?>
</table>
</body>
</html>
<?php
mysql_free_result($recordset1);
?>

and it still isn't working. As you can tell I'm poking around in the dark here being new to this somewhat!

Eiseth · May 23, 2013

Try putting your style below the title

<html>
<head>
    <title>How To Create Zebra Striped Table</title>
    <style type="text/css">
        .odd { background-color: blue; }
        .even { background-color: white; }
    </style>
</head>

Edited May 23, 2013 by Eiseth

Jessica · May 23, 2013

Try putting your style below the title

<html>
<head>
    <title>How To Create Zebra Striped Table</title>
    <style type="text/css">
        .odd { background-color: blue; }
        .even { background-color: white; }
    </style>
</head>

What? No.

Jessica · May 23, 2013

OP, you need to put the class on the TR.

You need to increment your counter.

Did you read my previous post? I basically did it for you, what is the problem?

Eiseth · May 23, 2013

What? No.

Isn't styles supposed to be inside head tags?

Yeah forgot to increment the counter

Jessica · May 23, 2013

I misread your post. The style tags do have to be within the HTML tags.

mdemetri2 · May 23, 2013

Thanks to both of you. Ok, so I moved the style section to after the title section.

Jessica, you said I need to increment the counter but I am really not sure what to change and therefore how to do this.....I assume something like $count + 1 somewhere? I really do need to find out how to understand your code and break it down into what each part is doing....

Jessica · May 23, 2013

What did mine have that yours doesn't?

mdemetri2 · May 23, 2013

erm, $num++; ??

And by comparing what I have and what you sent I also realised that I am not using what you provided.....probably because I failed miserably to implement it the first time round, and then got changing it using other reponses or things I found! It's been one of those days....I will try yours again.

mdemetri2 · May 23, 2013

holy crap lol. I just amended what I had to this:

And it bloody works!

However is it a messy way of doing it? And...I dont really understand what is goind on specifically! BUT Jessica you have been excellent help....can you recommend any decent books for this stuff?

Jessica · May 23, 2013

I don't really learn by reading books so I can't. However there is a thread somewhere here with a list of good ones.

The PHP manual is very useful. Follow their examples, read the comments, read the manual pages about all the basics.

It would look less messy if you don't start/stop PHP all the time.

mdemetri2 · May 24, 2013

So far wonderful help, thank you.

To extend on this a little, is it possible to alter the now working code, so that it says 'None' if there are no records returned by the query? So I imagine a check that says if the recordset count = 0 then echo 'None'....?

mdemetri2 · May 28, 2013

Hi, been playing around with this and not getting anywhere, still stuck with the original code. Anyone?

Jessica · May 28, 2013

Why are you using the original code? It didn't work.

mdemetri2 · May 30, 2013

sorry wrong terminology, I meant the code that works for striping the rows:

<?php $count = 0; do { ?>
          <tr>
          <?php $count++;?>
            <td colspan = "5" class="<?php echo (($count % 2) == 0) ? 'even' : 'odd'; ?>"><?php echo $row_RecordSet1['userid']; ?></td>
          </tr>
          <?php } while ($row_RecordSet1 = mysql_fetch_assoc($RecordSet1)); ?>

Jessica · May 30, 2013

Okay so that is your code, what is the problem?

You really need to switch to using a while loop, not a do-while, and remove your extra fetch() call, like I said to do in my ~~very first~~ second post.

Edited May 30, 2013 by Jessica

mdemetri2 · May 30, 2013

I was asking whether it was possible to amend it to show 'No Records' when there were no results from the query......rather than the table just displaying no row / content at all.

I will take a look at a while loop, and find out you mean by the other fetch - it could be to do with the repeat region - and obviously dreamweaver will also be adding code that might not be necessary.....but I wouldn't know what to remove - noob, remember....using dreamweaver might not be the best way to learn (or not as the case may be) but that is what I am using.

Thank you for your continued help, it is appreciated - even though it might be simple stuff for you!

Jessica · May 30, 2013

A. STOP USING DREAMWEAVER.

B. Read the PHP manual on PDO/mysqli and switch to one of those.

C. Yes, it is possible. Do A&B first.

Sign In

zebra stripe dynamic table for ie8

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information