如何通过单击显示数组和按钮

How can I show array and button by click?

本文关键字：按钮 数组 显示 何通过 单击      更新时间：2023-09-26

我有一个简单的带有按钮的表格：<button class='btn btn-info' href='#'>More</button>，当用户单击"更多"按钮时，我需要它，然后数组（例如$records）和"更少"按钮将显示在"更多"按钮下。例如，$records[0]="1", $records[1]="2" .拜托，我不太了解JavaScript和JQuery，但我需要使用Ajax。所以，我非常需要你的帮助。谢谢。

更新： 

$("button.btn-info").click(function() {
    alert('click');
});

这是通过"更多按钮"单击的代码，但我不知道如何在此按钮下编写$records数组，最后带有"更少"按钮（将通过单击隐藏数组）。

PHP （仅限示例）：

<?php
   $records = array(1,2,3,4,5,6,7);
?>

.HTML：

<html>
<body>
<div id="more">
    <button>More</button>
</div>
<div id="less" style="display: none;">
    <div id="codes" style="border-top: 1px dotted #d0d0d0;">
        <?php
           for($i=0; $i<count($records); $i++) {
              printf("$records[%d] = %d<br />",$i,$records[$i]);
           }
        ?>
    </div>
</div>
</body>
</html>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

.JS：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var i = 1;
    $('div#more button').click(function() {
        $('div#less').toggle();
        if (i) { $(this).html('Less'); i=0; } else { $(this).html('More'); i=1; }
    });
});​
</script>

附言不要忘记包含jQuery插件，否则这将不起作用。

编辑：它jquery.min.js

演示小提琴：http://jsfiddle.net/fe9wv/

你可以使用 Jquery 来实现这一点，下面是一个粗略的例子假设：所有按钮都有一个ID（通过ajax获取数据所必需的）您在其中具有按钮的表格单元格也具有隐藏的显示样式和"数据跨度"类

      $('.btn-info').live('click',function(){
           var id = $(this).attr('id');
           $.ajax({
                    type : "POST",
        url: "YOUR TARGET URL",
                    dataType : "HTML",//you can also use JSON
                    data     : 'id=' + id,
            success: function(data)
           {
                       $(this).siblings('.dataspan').html(data);
                       $(this).siblings('.dataspan').append('<button class="hidedata"  value="HIDE"/>');
                       $(this).siblings('.dataspan').show();
           }
    }); 
      });
//FOR hiding the data
$('.hidedata').live('click' , function(){
      $(this).siblings('.dataspan').hide();
});

请注意，根据最新的JQuery版本，.live函数已被弃用，如果您使用的是最新版本，我强烈建议您切换到委托函数

相关文章：