1. Tabellenzeile für Datatabellen einschränken

Question

Hi Ich arbeite gerade an Datatables und habe einen Code geschrieben, wenn eine Tabellenzeile angeklickt wurde, gibt es eine bestimmte Funktion, die aufgerufen wird.

Das Problem ist, wenn ich auf die Tabellenzeile für den Tabellenkopf klicke, tut es auch die Funktion (ES MUSS NICHT).

Hier ist ein Ausschnitt meines Codes, wenn ich auf die Tabellenzeile klicke, wird eine Funktion aufgerufen.

$('#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'); 
}); 

Ich möchte, dass die Header der Lage sein, nicht die Funktion unter dem Onclick in jQuery auszuführen, aber ich will es nicht deaktivieren, weil ich die Datentabellen in Funktion gebaut verwenden möchten, um die Zellen zu sortieren.

Dank

Answer 1

interpretiere ich Ihre Frage die sein folgendes: wenn ich auf einer Tabellenzeile klicken, kann ich einen Click-Handler aufrufen, wenn und nur wenn diese Zeile hat <td> Elemente, nicht <th> Elemente, dh nur wenn es ist eine Nicht-Kopfzeile?

Um dies zu erreichen, verwenden Sie den jQuery .has() Selektor. Insbesondere in Ihrem Code, statt

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

Verwendung

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

Im Beispiel unten, das currentTarget Ergebnis der ausgewählten Elements zeigt, dass es in der Tat die Reihe ist, und nicht die Zelle, ist, dass der Klick des derzeitiges Ziel. Darüber hinaus fordert es die Handler-Funktion (oder nicht), wie folgt:

• , wenn Sie auf einem normalen Datenzeile klicken, dh eine Zeile mit allen <td> Zellen
• nicht, wenn Sie auf einem normalen Kopfzeile, dh eine Reihe mit allen <th> Zellen
• wenn Sie auf eine Fehl gebildet Zeile klicken, dass (unangemessen) enthält sowohl <th> und <td> Reihen

Sie sollten nie eine Tabellenzeile in der letzten Art und Weise bilden. Dieses Beispiel zeigt jedoch, wie der Selektor funktioniert. Insbesondere wenn Sie auf die Zelle <th> in dieser Zeile klicken, wird der Click-Handler weiterhin ausgelöst, da Sie auf eine Zelle in einer Zeile klicken, die mindestens eine <td> Zelle enthält. Das sollte nie sein, was Sie wollen, aber es zeigt, was gerade passiert.

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>