斑马（偶/奇）的行中的CSS 和超链接的问题(zebra (even/odd) rows cs

我有这个小选择代码，应该提供一个“斑马”奇/偶行。我不知道如何更改CSS为：

如图1所示，将要列出的每个其它（而不是每秒）应该。即便CSS

2，如果其中一人点击要大胆以及

（我无法弄清楚，如何合并这两个问题）

任何帮助，将不胜感激，从一个初学者。

<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:

你应该定义一个类odd或even （取决于你喜欢哪一个有交替颜色）在你的CSS。

比方说，你选择了“奇”。然后在PHP代码定义一个计数器，并检查其余的模2是否等于1 - >如果这样添加类“奇”到<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>...

然而，加粗上点击它的对应行的东西，你会preferrably在Javascript中做，因为它是一个客户端事件，该代码响应属于在客户端了。这里是粗的解决方案，只是为了说明我的意思，但不建议对于清理的关注点分离“不显眼”的JavaScript。理想情况下，你会把这在重视Javascript中的事件处理程序的形式单独的JavaScript文件，这并不在HTML，如果你想保持干净的归属。

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

Answer 2:

这将是更容易与jQuery或原型或类似的东西去做。我会原型，像这样做：

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

所以，选择所有奇数里的物品，并应用适当的CSS它（调用）。你做的奇列表项同样的事情，只是采用其他的CSS

而对于大胆的部分，只需添加onClick事件为每立项目，并设置风格，大胆的将它，像这样：

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

文章来源: zebra (even/odd) rows css in

and hyperlink issue