[英]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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.