中的斑马线（偶数/奇数）行 css和超链接问题

Question

我有这个小选择代码，它应该提供“斑马”偶数/奇数行。我不明白如何更改CSS：

1，将列出的所有其他内容（而不是每秒）都应该有.even 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

您应该在 CSS 中定义一个 odd 或 even 类（取决于您想要交替颜色的类）。

假设您选择“奇数”。然后在 PHP 代码中定义一个计数器并检查模 2 的余数是否等于 1 ->如果是这样，请将“odd”类添加到

中。

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

但是，在单击相应行时将其加粗是您最好在 Javascript 中执行的操作，因为它是客户端事件，响应该事件的代码也属于客户端。这是一个粗略的解决方案，只是为了展示我的意思，但不建议在干净的关注点分离和“不引人注目的”Javascript 方面使用它。理想情况下，您可以将其放在一个单独的 Javascript 文件中，该文件在 Javascript 中附加事件处理程序表单，如果您想保持干净，那么它不属于 HTML。

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

Answer 2

使用 jquery 或 prototype 或类似的东西会更容易。我会用原型来做到这一点，如下所示：

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

因此，选择所有奇数编号的 li 项目，并为其应用适当的 css （调用）。您对奇怪的列表项执行相同的操作，只需应用其他 css

对于粗体部分，只需为每个 li 项添加 onClick 事件，并设置将其加粗的样式，如下所示：

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