データテーブルの最初のテーブル行を制限する

Question

現在、私はdatatablesで作業しています。テーブル行がクリックされたときにコードが書き込まれ、呼び出される特定の関数があります。

問題は、テーブルヘッダーのテーブル行をクリックしても機能しないということです（ITMUST NOT）。

私のコードのスニペットは、テーブルの行をクリックすると呼び出される関数があります。

$('#response-contact-container').on('click', 'tr', function(){ 
    var table = $('#response-contact-container').DataTable(); 
    var data = table.row(this).data(); 
    $('#edit-contact-settings').modal('hide'); 
    $('.modal-backdrop').remove(); 

    var community_contacts = ['c_id','firstname','lastname','prefix','office','sitename','number','rel']; 
    var employee_contacts = ['eid','firstname','lastname','nickname','birthday','email','numbers','grouptags']; 
    var counter = 1; 

    var container = document.getElementById("contact-settings-wrapper"); 

    while (container.hasChildNodes()) { 
     container.removeChild(container.lastChild); 
    } 

    for(var i=1; i< data.length; i++) { 

     var label = document.createElement("label"); 
     var input = document.createElement("input"); 

     if (data[0].charAt(0)=="c") { 
      var t = document.createTextNode(community_contacts[i].capitalize()); 
      label.appendChild(t); 
      container.appendChild(label); 
      input.type = "text"; 
      input.name = community_contacts[i]; 
      input.className = "form-control"; 
      input.value = data[i]; 
      container.appendChild(input); 
      container.appendChild(document.createElement("br")); 
     } else { 
      var t = document.createTextNode(employee_contacts[i].capitalize()); 
      label.appendChild(t); 
      container.appendChild(label); 
      input.type = "text"; 
      input.name = community_contacts[i]; 
      input.className = "form-control"; 
      input.value = data[i]; 
      container.appendChild(input); 
      container.appendChild(document.createElement("br")); 
     } 

     console.log(data[i]); 
     counter++; 
    } 
    $('#edit-contact').modal('show'); 
}); 

私は、ヘッダーはjQueryの中のonclickの下で機能を実行しないことができるようしたいが、私は細胞を選別機能に建てられたのDataTableを使用したいので、私はそれを無効にしたくありません。私は、テーブルの行をクリックしたとき、すなわちときにのみ、それを、私は場合は、クリックハンドラを呼び出すと、その行は<td>要素、ない<th>の要素を持っている場合にのみすることができます：私はあなたの質問には、次のことを解釈

おかげ

Answer 1

非ヘッダー行ですか？

これを行うには、jQuery .has()セレクタを使用します。具体的には、コードの代わりに

...on('click', 'tr', ... 

以下の例で使用

...on('click', 'tr:has(td)', ... 

に、選択された要素のcurrentTarget結果は、それが実際の行ではなく、細胞であることを示し、それは、クリックのあります現在のターゲット。次のようにまた、ハンドラ関数（またはしない）を呼び出します。

• あなたは、通常のデータ行をクリックすると、すべての<td>細胞
• ないあなたは、通常のヘッダー行、すなわち上でクリックした行、すなわちすべて<th>細胞
• と行あなたが<th>と<td>行

の両方が含まれています（不適切な）ことをあなたは最後の方法で、テーブルの列を形成することはありませんMAL-形成された行をクリックしてください。ただし、この例ではセレクタの動作を示しています。具体的には、少なくとも1つの<td>セルを含む行のセルをクリックしているため、その行の<th>セルをクリックしても、クリックハンドラはまだを発します。それは決してあなたが望むものではありませんが、実際に選択されていることに関して何が起こっているのかを示しています。

var counter = 0; 
 

 
$('#myTable').on('click', 'tr:has(td)', function(e) { 
 
    console.log(e.currentTarget); 
 
}); 
 

 
$('#myTable').on('click', 'tr', function(e) { 
 
    counter += 1; 
 
    console.log(counter + ' clicks'); 
 
});

table { 
 
    border-collapse: collapse; 
 
} 
 
td, th { 
 
    border: black solid 1px; 
 
    padding: 0.5em; 
 
    text-align: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="myTable"> 
 
    <tr> 
 
    <th>normal header row - cell #1 - &lt;th&gt;</th> 
 
    <th>normal header row - cell #2 - &lt;th&gt;</th> 
 
    </tr> 
 
    <tr> 
 
    <th>malformed (mixed) row - cell #1 - &lt;th&gt;</th> 
 
    <td>malformed (mixed) row - cell #2 - &lt;td&gt;</td> 
 
    </tr> 
 
    <tr> 
 
    <td>normal data row - cell #1 - &lt;td&gt;</td> 
 
    <td>normal data row - cell #2 - &lt;td&gt;</td> 
 
    </tr> 
 
</table>