Question

我有一个带按钮的简单表格：<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');
});

这是用“更多按钮”点击的代码，但我不知道如何在这个按钮下用“Less”按钮编写$ records数组（最后会点击隐藏数组）。

Answer 1

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>

P.S。不要忘记包含jQuery插件，否则这将不起作用。

编辑：那里是jquery.min.js

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

Answer 2

你可以使用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();
});

请注意，根据最新的JQuery版本，不推荐使用.live功能，如果您使用的是最新版本，我强烈建议您切换到委托功能

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

2 个答案: