jQuery Datatable kann keine neu erstellte Zeile bearbeiten

Question

Ich verwende derzeit jQuery-Datatabellen, um die Tabelle, die ich zeige, zu erstellen. Derzeit habe ich es eingerichtet, wenn ich eine Zeile in der Tabelle auswählen, wird der Text in dieser Zeile in einem Textfeld in einem anderen Fenster angezeigt. Ich kann dann etwas anderes eingeben und "Speichern" drücken, und es ändert den Text in dieser Zeile. Mein aktuelles Problem ist, wenn ich eine neue Zeile über eine Schaltfläche hinzufüge, kann ich den Text in der neuen Zeile nicht bearbeiten, kann ich es aber auswählen ... Beispiel: Ich habe 3 Zeilen, ich wähle Test1 und ich kann den Text erfolgreich ändern . Dann klicke ich auf Zeile hinzufügen und wähle dann die neue Zeile aus und versuche, den Text in dieser Zeile zu ändern. Dadurch ändert sich der Text der zuvor ausgewählten Zeile (eine Zeile, die beim Laden in der Tabelle war). Wie kann ich dieses Problem beheben? Ich habe in cell.data, cell.edit gesucht, aber das ist für den Editor, den ich momentan aus verschiedenen Gründen nicht verwende.

Tabelle:

<div class="panel-body"> 
       <table id="data-table" class="table table-striped table-bordered nowrap" width="100%"> 
        <thead> 
         <tr> 
          <th>Name</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr class="odd"> 
          <td>All</td> 
         </tr> 
         <tr class="even"> 
          <td>Test1</td> 
         </tr> 
         <tr class="odd"> 
          <td>Test2</td> 
         </tr> 
        </tbody> 
       </table> 
       <div class="col-md-8 col-md-offset-1"> 
        <button type="submit" class="btn btn-sm btn-primary m-r-5" id="addbtn" >New Group</button> 
       </div> 
      </div> 
//Text box 
<div class="form-group"> 
       <label class="col-md-4 control-label">Group Name:</label> 
        <div class="col-md-8"> 
         <input type="text" id="groupname" class="form-control" value="Name"/> 
        </div> 
      </div> 

-Code für die Herstellung der Text in Textfeld erscheinen die ausgewählten Zeile:

(function() { 

     var table = document.querySelector('#data-table'); 
     var textbox = document.querySelector('#groupname'); 

     table.addEventListener('click', onTableClick); 

     function onTableClick (e) { 
     var tr = e.target.parentElement; 

     var data = []; 
     for (var td of tr.children) { 
      data.push(td.innerHTML); 
     } 
     textbox.value = data[0]; 
     } 
    })(); 

Ändern der ausgewählten Zeile Text:

var row = null; 

    $("#data-table tr td").click(function() { 
     $("#groupname").val($(this).text()); 
     row = $(this); 


     $("#saverow").click(function() { 
      if (row != null) { 
      row.text($("#groupname").val()); 
      } 
     }); 
    }); 

Zeile hinzufügen:

$("#addbtn").click(function() { 
    var t = $('#data-table').DataTable(); 

$('#data-table').dataTable(); 
    t.row.add([ 
     "New Group" 
    ]).draw(false); 
}); 

Answer 1

Wie gesagt here, von andrister, wenn wir .click verwenden, wird ein separater Handler für jedes einzelne Element erstellt, das dem Selektor entspricht. Das bedeutet

1. viele Anpasselemente viele identische Handler erzeugen würde und somit Speicherbedarf
2. dynamisch hinzugefügt Elemente erhöhen nicht den Handler haben - „Alarm“, dh in der obigen html die neu hinzugefügte Schaltflächen funktionieren nur, wenn Sie den Handler erneut binden.

Aber wenn wir verwenden.on, Es gibt einen einzigen Handler für alle Elemente, die zu Ihrem Selektor passen, einschließlich der dynamisch erzeugten.

Also änderte ich

$("#data-table tr td").click(function() { 

zu

$("#data-table").on('click', 'td', function() { 

mein Problem zu beheben.

Answer 2

Warum haben Sie diese beiden widersprüchlichen Anweisungen in der Tabelle klicken? wurde gerade angeklickt

1. Set Gruppenname eingegeben ersten Spalte in der Zeile Benutzer geklickt nur

   function onTableClick (e) { 
       ... 
       textbox.value = data[0]; 
       ... 
   } 
   

   Hier textbox.value = data[0] Einstellung des '#groupname' Textwert auf die erste Spalte von was auch immer Zeile des Eingabefeldes zu sein scheint.

2. Set Eingang Text der Zelle geklickt wir auf

   $("#data-table tr td").click(function() { 
       ... 
       row.text($("#groupname").val()); 
       ... 
   }); 
   

Hier row.text($("#groupname").val()); scheint auf den Text der genauen Spalte des '#groupname' Eingabefeldes des Textwertes Einstellung wird wir angeklickt.

By the way, ist row hier eine irreführende Variablennamen, weil das eigentliche Element $(this) einem td ist bezieht, die ein Kind eines tr ist, die ein Kind von '#data-table' ist. Also wirklich $(this) ist eine Spalte oder eine Tabellenzelle; es zu nennen ist row ist verwirrend.