У меня есть этот маленький код выбора, который должен содержать четные / нечетные строки зебры. Я не понимаю, как изменить css для этого:
1, каждый другой, который будет указан (и не каждую секунду), должен иметь .cven 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> Вы должны определить класс odd или even (зависит от того, какой из них вы хотите иметь в чередующемся цвете) в вашем CSS.
Предположим, вы выбрали «странный». Затем определите счетчик в вашем PHP-коде и проверьте, равен ли остаток по модулю 2 1 ->, если так добавить класс 'odd' в <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, так как это событие на стороне клиента, код, отвечающий этому, принадлежит и на стороне клиента. Вот грубое решение, просто чтобы показать, что я имею в виду, но это не рекомендуется в отношении чистого разделения проблем и «ненавязчивого» Javascript. В идеале вы помещаете это в отдельный файл Javascript, который прикрепляет форму обработчика событий в Javascript, это не относится к HTML, если вы хотите сохранить его в чистоте.
<input type="checkbox" onclick="this.parentNode.className='bold'" ...>
Было бы проще сделать это с помощью jquery или прототипа или чего-то подобного. Я бы сделал это с прототипом, примерно так:
$$('ul li:nth-child(odd)').invoke('addClassName', 'alt-row'); // Add class "alt-row" to even table rows
Итак, выберите все элементы с нечетным номером li и примените для него правильный css (invoke). Вы делаете то же самое с элементами нечетного списка, просто применяете другие css
И для выделенной жирной части просто добавьте событие onClick для каждого элемента li и задайте стиль, который будет выделен жирным шрифтом, примерно так:
<li onClick="this.className='bold'">Something</li>