javascript显示/隐藏中的顶部项目
Top items in javascript show/hide
我如何做到这一点,这样就会显示"显示前10项",当我点击它时,它会显示"隐藏前10项。"
我的代码
// TOP 10 items
$results = mysql_query("SELECT items1, items2, items3 FROM items");
if (mysql_num_rows($results) > 0) {
print ("<a href='"javascript: klappe_news('a4')'">Show Top 10 Items</a>
<div style='display:none'>
<table align='center' cellspacing='0' cellpadding='5'><tr>
<td>Items1</td>
<td>Items2</td>
<td>Items3</td>
</tr>");
while ($arr = mysql_fetch_assoc($results)) {
print ("<tr>
<td>".$arr['items1']."</td>
<td>".$arr['items2']."</td>
<td>".$arr['items3']."</td>
</tr>");
}
print("</table></div>");
} ?>
对于mysql,您必须使用类似的东西
$results = mysql_query("SELECT items1, items2, items3 FROM items LIMIT 10 ");
这必须使用jQuery或javascript来完成。
// TOP 10 items
$results = mysql_query("SELECT items1, items2, items3 FROM items");
if (mysql_num_rows($results) > 0) {
//You have to add an id to <a> to access it with jQuery
//You also need to add an id to the div
print ("<a id="show_hide" href='"javascript: klappe_news('a4')'">Show Top 10 Items</a>
<div id="table_container" style='display:none'>
<table align='center' cellspacing='0' cellpadding='5'><tr>
<td>Items1</td>
<td>Items2</td>
<td>Items3</td>
</tr>");
while ($arr = mysql_fetch_assoc($results)) {
print ("<tr>
<td>".$arr['items1']."</td>
<td>".$arr['items2']."</td>
<td>".$arr['items3']."</td>
</tr>");
}
print("</table></div>");
} ?>
<!-- Add jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
//Click event
$('#show_hide').click(function() {
//Hides the div with id table_container
$('#table_container').toggle();
//Checks if div with id table_container is visble, then it hides or shows it and changes the text
if($('#table_container').is(':visible'))
$(this).html('Hide Top 10 Items');
else
$(this).html('Show Top 10 Items');
});
</script>
你可能对页面有问题,因为你使用的是一个标签,每次你点击它,它都会重新加载页面,所以你可能需要将其切换到div。
编辑:我忘记添加jQuery
相关文章:
- 交互.js拖动的项目移动到顶部
- Knockout.js:将选中的项目移到列表的顶部
- 如何滚动到DIV顶部表格的最后一个位置(项目10)
- 当目标处于顶部滚动状态时,如何从菜单中激活项目
- 下划线.js,从一个对象中获取两个项目并添加到顶部
- 使用 JavaScript 将项目添加到列表顶部
- 角度JS从数据中选择菜单,在顶部保留1个项目
- 当在 Ul 上使用向上/向下箭头到达溢出自动项目的顶部/底部时显示隐藏的项目
- 对列表顶部的选中项目进行排序
- 取消选中所有项目后,将选中的项目移到顶部
- 从页面顶部获取项目偏移量
- 使用Angular将最新的项目放在待办事项列表的顶部
- javascript显示/隐藏中的顶部项目
- Javascript数组排序将字符串MAG250放在底部,其他项目放在ASC顶部
- 将选中的项目放在列表的顶部
- 约束和可拖动项目没有出现在顶部-版本II
- jQuery可排序-如果拖出,将项目移动到列表顶部
- 动画项目在屏幕的底部到屏幕的顶部在jquery
- 在项目点击,项目重新呈现和滚动到顶部,这是不希望的
- 自定义事件的基础5顶部栏下拉项目