Php 如何通过单击显示阵列和按钮？_Php_Javascript_Jquery

Php 如何通过单击显示阵列和按钮？

php javascript jquery

Php 如何通过单击显示阵列和按钮？,php,javascript,jquery,Php,Javascript,Jquery,我有一个带有按钮的简单表格：More，我需要当用户单击“More”按钮时，数组（$records，例如）和“Less”按钮将显示在“More”按钮下。例如，$records[0]=“1”，“$records[1]=“2”。拜托，我不太了解JavaScript和JQuery，但我需要使用Ajax。所以，我非常需要你的帮助。多谢各位更新： $("button.btn-info").click(function() { alert('click'); }); 这是通过“更多按钮”单击的代码

我有一个带有按钮的简单表格：

More

，我需要当用户单击“More”按钮时，数组（$records，例如）和“Less”按钮将显示在“More”按钮下。例如，

$records[0]=“1”，“$records[1]=“2”

。拜托，我不太了解JavaScript和JQuery，但我需要使用Ajax。所以，我非常需要你的帮助。多谢各位

更新：

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

这是通过“更多按钮”单击的代码，但我不知道如何在最后使用“更少”按钮（通过单击将隐藏数组）在该按钮下写入$records数组

PHP（仅示例）：

HTML:


更多

JS:


$（文档）.ready（函数（）{
var i=1；
$（'div#更多按钮'）。单击（函数（）{
$（'div#less'）.toggle（）；
if（i）{$（this.html（'Less'）；i=0；}else{$（this.html（'More'）；i=1；}
});
});

另外，别忘了包括jQuery插件，否则这将不起作用

编辑：在那里有

jquery.min.js

Demo fiddle:

您可以使用Jquery进行此操作，下面是一个粗略的示例假设：所有按钮都有一个ID（通过ajax获取数据所需）按钮所在的表格单元格也有一个显示样式为隐藏且类为“dataspan”的

      $('.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();
});

$（'.btn info'）.live（'click'，function（））{
var id=$（this.attr（'id'）；
$.ajax({
类型：“POST”，
url:“您的目标url”，
数据类型：“HTML”，//您也可以使用JSON
数据：“id=”+id，
成功：功能（数据）
{
$（this）.sides（'.dataspan'）.html（数据）；
$（this）.sides（'.dataspan'）.append（''）；
$（this.sides（'.dataspan'）.show（）；
}
}); 
});
//用于隐藏数据
$（'.hidedata'）.live（'click'，function（）{
$（this.sides（'.dataspan'）.hide（）；
});

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

Oh抱歉。我忘了id。我需要所有按钮都是一个类的成员，但根据单击的按钮，用户将看到不同的阵列，您希望在其中显示更多“详细信息”？你们能写更多或者显示snapI有2列的表格吗：1列-字段，第二列-“更多”按钮。当用户单击“按”按钮时，我需要在按钮下显示数组。在数组的末尾，我需要添加按钮“Less”-如果用户单击“Less”按钮，那么数组必须隐藏。请帮帮我。非常感谢。@userX id不能以数字开头。嗯，不完全正确，因为HTML5允许，但我不会推荐。对不起，我的“id”不能是数字。我已经删除了它，所以请添加“少”按钮。您忘了。@user1477886当您单击时，

More

按钮被替换为

Less

，您不喜欢吗？

<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>

<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>

      $('.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();
});