隐藏id大于$number的行
Hide rows with id greater than $number
我有一个php变量,并希望通过css隐藏大于$number的所有行。如。数量= 12美元;
<style>
#row<?php echo $number?>{
display: none;
}
</style>
这将只隐藏一行12。我想隐藏所有大于12的行
有什么建议吗?
添加一个循环,并自动将代码写入页面....
<?php
for ($i = $number; $i <= 100; $i++) {
echo '#row'.$i.' {display: none;}';
}
?>
在上面的代码中,我们从$number(例如,12)开始,一直到100。我们循环12到100之间的每个数字,并写出我们的"隐藏"代码。
上面的代码示例将返回如下内容:
#row12 {display: none;}
#row13 {display: none;}
#row14 {display: none;}
#row15 {display: none;}
另外,如果你想把它直接放在你的页面中,它可能看起来像这样:
<?php
echo '<style>';
for ($i = $number; $i <= 100; $i++) {
echo '#row'.$i.' {display: none;}';
}
echo '</style>';
?>
要做到这一点,你需要一个父div和一个支持:nth-child
的浏览器
<div class="data">
<div class="row">row1</div>
<div class="row">row2</div>
<div class="row">row3</div>
<div class="row">row4</div>
<div class="row">row5</div>
<div class="row">row6</div>
<div class="row">row7</div>
<div class="row">row8</div>
<div class="row">row9</div>
<div class="row">row10</div>
<div class="row">row11</div>
<div class="row">row12</div>
<div class="row">row13</div>
<div class="row">row14</div>
<div class="row">row15</div>
</div>
CSS .data div:nth-child(n+12) {
display: none;
}
参见demo http://jsfiddle.net/PY5Fe/101/
用类标记最后一个可见行-例如finalRow
-并使用CSS的一般兄弟选择器~
:
~组合符分隔两个选择器,只有当第二个选择器前面有第一个元素,并且两个选择器有共同的父元素时,才匹配第二个选择器。
隐藏它后面的所有行(本例假设每行都是div
;当然,根据需要修改):
<style>
.finalRow ~ div {
display: none;
}
</style>
见http://jsfiddle.net/dh7Lp8vk/。这种方法的一个好处是,您可以让客户端Javascript根据需要移动finalRow
类。
相关文章:
- 在jQuery中获取表的行索引
- 什么是&&在没有if的行中的变量之间
- 从单击的行上的列中获取数据
- 携带表的行id
- 保存表中的行's在数组中的tbody,稍后使用它们
- 从Javascript中选定的行中获取特定单元格的值
- 获取表中要更改的行的背景以进行单击
- 解析云代码作业:删除在数据库中已经存在一个小时的行
- 使用ajax发送rowID并将选定的行附加到新表中
- 在字符串nodejs的行上迭代
- 使用Jquery收集数组中的行ID,然后为新表查询这些值
- 如何在javascript中获取选定的行id
- 如何反转表的行顺序
- 禁用表中的行单击
- 获取多维JSON变量的行数
- 使用jquery时在表上方插入的行
- 单击删除其中一个添加的行
- 在PDF中查看时,我的行中出现换行.(添加减号时)
- 删除javascript中包含特定单词的行
- 隐藏id大于$number的行