php - 如何在 Codeigniter 中基于表中按钮的 onclick 使用 jQuery 实现 show() hide() 函数？

Question

我需要它，这样额外的信息就会在点击时弹出，否则会被隐藏。我试过使用 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>  

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

Answer 2

这就是我将如何做到的。

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

Answer 3

我看不到您在哪里提供了按钮所在的代码，但您可以简单地输入：

onclick="$('#extra_info_div_id').toggle();"

在按钮的代码中。