jQuery Datatables, Bearbeitung der Zeile der ausgewählten Zeile mit Textfeld

Question

Ich habe eine jQuery Datentabelle mit nur einer Spalte. Wenn eine Zeile ausgewählt ist, wird ein Fenster mit einem Textfeld geöffnet. Dieses Textfeld wird automatisch mit dem Namen der ausgewählten td ausgefüllt. Ich versuche, den Namen der ausgewählten Zeile mit dem Textfeld zu ändern. Bsp .: Ich wähle die zweite Reihe (benannter Test), und gehe zu der Textbox und gebe "Äpfel" ein, Test ist jetzt Äpfel. Wie kann ich diese Bearbeitung durchführen? Ich habe die Inline-Bearbeitungsfunktion ausprobiert, würde diese Methode aber nach Möglichkeit bevorzugen.

Tabelle:

<table id="data-table" class="table table-striped table-bordered nowrap" width="100%"> 
        <thead> 
         <tr> 
          <th>Name</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr class="odd gradeX"> 
          <td>All</td> 
         </tr> 
         <tr class="odd gradeX"> 
          <td>Test</td> 
         </tr> 
         <tr class="odd gradeX"> 
          <td>Test3</td> 
         </tr> 
        </tbody> 
       </table> 

Panel mit Textfeld:

<div class="panel-body"> 
      <form class="form-horizontal" action="/" method="POST"> 
      <legend>Settings</legend> 
      <div class="form-group"> 
       <label class="col-md-4 control-label">Name:</label> 
        <div class="col-md-8"> 
         <input type="text" id="groupname" class="form-control" value="Name"/> 
        </div> 
      </div> 
      </div> 
     </div> 

Script die Zeile td in Textbox ausgewählt AutoFills:

(function() { 

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

table.addEventListener('click', onTableClick); 

function onTableClick (e) { 
//console.log(e.currentTarget); 
var tr = e.target.parentElement; 
//console.log(tr.children); 

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

Answer 1

Shop die td auf Klick auf Zeile geklickt in globale Variable & Formular hinzufügen Submit-Ereignis dann zuweisen die va lue der Eingabe, die die Variable gespeichert hat.

var row = null; 
 

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

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

 
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="odd gradeX"> 
 
     <td>All</td> 
 
    </tr> 
 
    <tr class="odd gradeX"> 
 
     <td>Test</td> 
 
    </tr> 
 
    <tr class="odd gradeX"> 
 
     <td>Test3</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<div class="panel-body"> 
 
    <legend>Settings</legend> 
 
    <div class="form-group"> 
 
    <label class="col-md-4 control-label">Name:</label> 
 
    <div class="col-md-8"> 
 
     <div class="input-group"> 
 
     <input type="text" id="groupname" class="form-control" value="" /> 
 
     <span class="input-group-btn"> 
 
      <button id="updateBtn" class="btn btn-default" type="button"> 
 
       Update 
 
      </button> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>