0

我正在处理一个动态表，其中第一列/左列中有 2 个复选框，下一个 td 是程序名称和日期，php 循环遍历所有可用程序。

当用户点击一行时，更多信息会通过 jQuery 插件下拉。

就像现在一样，当您单击复选框时，下拉菜单被激活，这不是我需要它做的。

单击复选框时如何停止下拉行？

这全部来自 jExpand 插件：jExpand

头部脚本：

<script type="text/javascript">
  $(document).ready(function(){
     $("#report tr:odd").addClass("odd");
     $("#report tr:not(.odd)").hide();
     $("#report tr:first-child").show();

     $("#report tr.odd").click(function(){
         $(this).next("tr").toggle();
         $(this).find(".arrow").toggleClass("up");
     });
     //$("#report").jExpand();
 });
 </script>

文件中的脚本：

(function($){
$.fn.jExpand = function(){
    var element = this;

    $(element).find("tr:odd").addClass("odd");
    $(element).find("tr:not(.odd)").hide();
    $(element).find("tr:first-child").show();

    $(element).find("tr.odd").click(function() {
        $(this).next("tr").toggle();
    });

}    
});

HTML：

<table id="report">
    <tr>
        <th>Master/Registration</th>
        <th></th>
        <th>Program Name</th>
        <th></th>
        <th>Date</th>
        <th></th>
    </tr>
    <?php do { ?>
    <tr>
        <td><input name="pid[]" type="checkbox" class="eventCodeCheck" value="<?php echo $row_programs['{table-column}']; ?>" />
            <input name="pid[]" type="checkbox" class="eventCodeCheck" value="<?php echo $row_programs['{table-column}']; ?>" />
        </td>
        <td></td>
        <td><?php echo $row_programs['{table-column}']; ?></td>
        <td></td>
        <td><?php echo $row_programs['format_date']; ?></td>
        <td><div class="arrow"></div></td>
    </tr>
    <tr>
        <td colspan="5">
            <h4>Additional information</h4>
            <ul>
                <li>Info</li>
                <li>Info</li>
                <li>Info</li>
             </ul>   
        </td>
    </tr>

    <?php } while ($query = mysql_fetch_assoc($xxxxxxx)); ?>
    </table>
4

2 回答 2

1

单击复选框时，您需要停止事件的传播：

$('input.eventCodeCheck').click(function(e) {
    e.stopPropagation();
});
于 2012-10-15T16:32:38.797 回答
0 
$("#report tr.odd").click(function(e){
     if( e.target.type.toLowerCase() == 'checkbox') { 
     }
     else{  
       $(this).next("tr").toggle();
       $(this).find(".arrow").toggleClass("up");
     }
});
于 2012-10-15T16:29:00.157 回答