javascript中的热门项目显示/隐藏

时间:2014-09-11 22:07:08

标签: javascript php jquery

我怎么能这样做,所以会有阅读"显示前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>");
    } ?>

2 个答案:

答案 0 :(得分:2)

对于mysql,你必须使用类似的东西

$results = mysql_query("SELECT items1, items2, items3 FROM items LIMIT 10 ");

答案 1 :(得分:-1)

这必须使用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