2017-12-18 7 views
1

ヘッダー列のクリックイベントを回避する方法。ヘッダー列をクリックしないようにする方法

HTML:

<table> 
    <tr> 
     <th class="column">Header</th> 
    </tr> 
    <tr> 
     <td class="column">Body 1</td> 
    </tr> 
    <tr> 
     <td class="column">Body 2</td> 
    </tr> 
    <tr> 
     <td class="column">Body 3</td> 
    </tr> 
</table> 

そして、私のスクリプト

$('.column:not("th")').on('click', function(){ 
    alert("test"); 
}); 

答えて

5

なぜ:

$('td.column').on('click', function(){ 
    alert("test"); 
}); 
0
  1. ヨーヨー上のtbodyセレクターを追加Uコード

$('tbody .column').on('click', function() { 
 
    alert("test"); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th class="column">thead</th> 
 
    </tr> 
 
    <tr> 
 
     <th class="column">thead Body 1</th> 
 
    </tr> 
 
    <tr> 
 
     <th class="column">thead Body 2</th> 
 
    </tr> 
 
    <tr> 
 
     <th class="column">thead Body 3</th> 
 
    </tr> 
 
    </thead> 
 

 
    <tr> 
 
    <td class="column">Header</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="column">Body 1</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="column">Body 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="column">Body 3</td> 
 
    </tr> 
 
</table>

関連する問題