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


How can I implement show() hide() function using jQuery in Codeigniter based on onclick of button in a table?

我需要它,所以额外的信息弹出点击,否则是隐藏的。我试过使用show()和hide(),但我不确定我在做什么。谢谢大家,Kieran

视图:

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

你会遇到的一个问题是:

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

我看不出你在哪里提供了你的按钮的代码,但你可以简单地输入:

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

按钮代码

我是这样做的。

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