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