-2

我有一个带有按钮的简单表格：<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 数组，最后带有“更少”按钮（将通过单击隐藏数组）。

4

2 回答 2

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>

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

编辑：就是这样jquery.min.js

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

于 2012-06-30T08:36:56.783 回答
0

您可以为此使用 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 功能已被弃用，如果您使用的是最新版本，我强烈建议您切换到委托功能

于 2012-06-30T08:42:08.370 回答