zebra (even/odd) rows css in and hyperlink is

Question

I have this little select code which should provide a 'zebra' even/odd rows. I don't understand how to change the css for that:

1, every other that will be listed (and not every second) should have .even css

2, if one of them clicked should be bold as well

(I could not figure out, how to merge these two issue)

Any help would be appreciated, from a beginner.

<div id="left">
<?php
$query = $pdo->prepare('SELECT id, name FROM test1 ORDER BY name ASC');
$query->execute();
?>

<ul>
  <?php foreach ($query as $i => $row) { ?>
    <li>
      <?php if ($i)?>
      <input name="checkbox_add[]" id="test_<?php echo $i ?>" type="checkbox" value="<? echo $row['id']; ?>"/>
      <label for="test_<?php echo $i ?>"><a href="test1.php?gid=<?php echo $row['id']; ?>"><?php echo $row['name']; ?></a></label>
    </li>
  <?php } ?>
</ul>
</div>

Answer 1

You should define a class odd or even (depends on which one you would like to have in alternating color) in your CSS.

Let's say you chose 'odd'. Then define a counter in your PHP code and check whether the remainder modulo 2 is equal to 1 -> if so add class 'odd' to the <li>.

<div id="left">
<?php
$query = $pdo->prepare('SELECT id, name FROM test1 ORDER BY name ASC');
$query->execute();
$idx = 0;
?>


<?php if ($idx % 2 == 0): ?>
    <li>
<?php else: ?>
    <li class="odd">
<?php endif; ?>
<?php 
  $idx++;
  if ($i): ?>
  ...your <input> and <label>... 

However, bolding the corresponding row on clicking it is something that you would preferrably do in Javascript, as it is a client-side event, the code responding to that belongs on the client side, too. Here is a crude solution, just to show what I mean, but it is not recommended with respect to clean separation of concerns and "unobtrusive" Javascript. Ideally you would put this in a separate Javascript file that attaches the event handler form within Javascript, this doesn't belong in the HTML if you want to keep it clean.

<input type="checkbox" onclick="this.parentNode.className='bold'" ...>

Answer 2

It would be easier to do it with jquery or prototype or something similar. I would do it with prototype, something like this:

$$('ul li:nth-child(odd)').invoke('addClassName', 'alt-row'); 
// Add class "alt-row" to even table rows

So, select all odd numbered li items, and apply proper css for it (invoke). You do the same thing with the odd list items, just apply other css

And for the bold part, simply add onClick event for every li item, and set style that will bold it, something like this:

<li onClick="this.className='bold'">Something</li>