每4行更改一次css
change css for every 4th row
我想用不同的CSS:显示从数据库中抓取的每4行
<div class="last"></div>
但其余部分应该正常显示:
<div></div>
我正在使用简单的查询从数据库中获取数据:
SELECT LEN(column_name) FROM table_name
我见过这种类型的东西,但我不记得如何正确地做。有什么想法吗?
使用类似的css
tr:nth-child(4n) {
background-color:yellow;
}
<div<?php echo $i % 4 == 0 ? ' class="last"' : '' ?>>...</div>
使用%来获得除法余数,如果它等于零,那么它就是第四个div,我们需要用class打印它,否则什么都不打印。
这不是SQL中应该做的事情。让PHP中的一个变量充当从0开始的计数器,并在计数器的模数4为3时使用备用类。
<?php
$query = "SELECT LEN(column_name) FROM table_name";
$result = mysql_query($query);
$i = 1;
echo "<table>";
while ($row = mysql_fetch_assoc($result)) {
echo "<tr><td>";
echo "<p";
if ($i % 4 == 0) print " class='stripe'";
echo ">" . $row['item'] . "</p></td></tr>";
$i++;
}
echo "</table>";
?>
这个问题很荒谬,我不知道你为什么要在数据库中设置css样式。。这样做是不合逻辑的,而且会不必要地增加查询的复杂性。
无论如何,我的建议是在您的web层中也这样做,即一旦您从数据库中检索记录并呈现页面。只需编写将添加css类的sm逻辑。。
类似这样的东西:
<?php
$query = "SELECT LEN(column_name) FROM table_name";
$result = mysql_query($query);
$i = 1;
print "<table>";
while ($row = mysql_fetch_assoc($result)) {
print "<tr><td>";
print "<p";
if ($i % 4 == 0) print " class='stripe'";
print ">" . $row['item'] . "</p></td></tr>";
$i++;
}
print "</table>";
?>
不要用SQL查询,用PHP:
$result = mysql_query("SELECT * FROM table_name");
$i = 1;
while($row = mysql_fetch_array($result))
{
$class = ($i % 4 == 0) ? ' last' : '';
echo '<div class="'.$class.'"></div>';
$i++;
}
Bootstrap就是这样做的
.table-striped tbody tr:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.05);
}
因此,您可以创建自己的类,并用4n
替换odd
.table-striped-4th tbody tr:nth-child(4n) {
background-color: rgba(0, 0, 0, 0.05);
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-子
相关文章:
- 如果30秒未单击,请应用CSS一次,将其删除,然后重新迭代
- CSS 类在验证时只工作一次
- JQuery图像滑块和CSS转换只能工作一次
- jQuery+Animate.css动画只工作一次,动画不会重置
- 使用CSS或JavaScript更改背景图像一次
- CSS 动画只工作一次
- iFrame 中的实时预览和保存样式.css每 30 秒一次
- 在页面加载时禁用 CSS 动画,但每隔一段时间工作一次
- 在CSS中每隔一个子层着色一次
- 在jsp上获取css或js最后一次修改的dat
- JQuery背景颜色更改(.animate或.css)在重新启动后只能工作一次
- CSS和Javascript rotate只在onclick上运行一次
- CSS:折叠导航,一次一个元素
- 用jQuery切换两个CSS动画只工作一次
- 在Symfony 2上使用Assetic组合文件,只对所有CSS文件进行一次调用
- Jquery/Javascript在CSS改变后只运行一次自定义函数
- 有没有一种方法可以让一个CSS类的实例出现在多个元素上,但一次只能出现一个元素?
- 使用Jquery背景改变css -如何一次只允许一个链接
- 每4行更改一次css
- Angularjs: ng-class和CSS动画(只运行一次)