-2

私はボタンを持つ単純なテーブルを持っています:<button class='btn btn-info' href='#'>More</button>ユーザーが「More」ボタンをクリックすると、配列($recordsなど)と「Less」ボタンが「More」ボタンの下に表示される必要があります。たとえば、$records[0]="1", $records[1]="2". JavaScript と JQuery はよくわかりませんが、Ajax を使用する必要があります。ですから、あなたの助けが必要です。ありがとうございました。

アップデート：

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

「More ボタン」でクリックするためのコードなのですが、このボタンの下に $records 配列を書き、最後に「Less」ボタン (クリックすると配列が非表示になります) を付ける方法がわかりません。

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 に答える