斑马（偶数/奇数）行css in< ul>和超链接问题 [英] zebra (even/odd) rows css in <ul> and hyperlink issue

问题描述

我有这个小选择代码，应该提供一个'斑马'偶/奇数行。我不明白如何改变css为：

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，每隔一个将列出（而不是每秒）应该有.even css

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

2，如果其中一个点击应该也是粗体

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>

推荐答案

您应该定义一个类

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

我们假设你选择了'odd'。然后在你的PHP代码中定义一个计数器，并检查余数模2是否等于1 - >如果是这样在< li>

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

但是，最好在Javascript中做，因为它是一个客户端事件，响应的代码也属于客户端。这里是一个粗略的解决方案，只是为了显示我的意思，但它不推荐关于干净的分离关注和unobtrusiveJavascript。理想情况下，你会把它放在一个单独的Javascript文件中，在Javascript中附加事件处理程序表单，如果你想保持清洁，这不属于HTML。

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

这篇关于斑马（偶数/奇数）行css in< ul>和超链接问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！