1

クリックすると追加情報がポップアップし、それ以外の場合は非表示になるようにする必要があります。show() と hide() を使用してみましたが、何をしているのかわかりません。ありがとう、キエラン

意見：

<table class="table table-striped">
    <thead>
        <tr><th>Last name</th><th>First name</th><th>Practice</th><th>County</th><th>Email</th><th></th></tr>
    </thead>

    <tbody>
        <?php foreach ($health_professional as $hp): ?>
            <tr>
                <td><?php echo $hp['last_name'] ?></td>
                <td><?php echo $hp['first_name'] ?></td>
                <td><?php echo $hp['practice'] ?></td>
                <td><?php echo $hp['county'] ?></td>
                <td><?php echo $hp['email'] ?></td>


            <td><a class="btn btn-info" href="hp/view/<?php echo $hp['hpid'];?>">Expand</a></td>

            </tr>
            <thead>
        <tr><th>Permission to send info?</th><th>Registered</th><th>Attendance</th><th>Date of last update</th></tr>
    </thead>
            <tr id ="trid">
            <td><?php echo $hp['send_info']; ?></td>
            <td><?php echo $registration_count; ?></td>
            <td><?php echo $attendance_count; ?></td>
            <td><?php echo $hp['send_info_last_update']; ?></td>                
            </tr>
        <?php endforeach ?>
    </tbody>

</table>
4

3 に答える 3

2

遭遇する問題の 1 つは、次のことです。

<tr id="trid">

一意の ID にはなりません。各 $health_professional に関連付けられた ID があるため、次のように変更できます。

<tr id="tr-<?php echo $hp['hpid'];?>" class="hidden">

一意の ID とジェネリック クラスを取得したので、次のようにリンクを設定します。

<td><a class="expand" data="<?php echo $hp['hpid'];?>">Expand</a></td>

今、JavaScriptで呼び出すことができます

$(document).ready(function(){
    $('.expand').click(function () {
        var id = $(this).attr('data');
        $('#tr-' + id).show();
    });
});

そしてあなたのCSSで：

.hidden{display:none;}

これはハードコーディングされた例です (ひどいスタイリングは別として):

http://jsfiddle.net/4qbFQ/

于 2013-05-13T21:18:19.737 に答える
1

これが私がそれを行う方法です。

<script type="text/javascript">
    $(document).ready(function(){
        $('#trid').hide();
        $('#expand').click(function(){
            $('#trid').show();
        });
    });
</script>

...

<td><a class="btn btn-info" id="expand" href="javascript:;">Expand</a></td>
于 2013-05-13T19:36:43.177 に答える