Ändern Sie den Inhalt von td, um auszuwählen und umgekehrt

Question

Ich habe eine tr und wenn Sie darauf klicken, wird es zu select wechseln und ermöglichen dem Benutzer, eine Option auszuwählen. Wie kann ich mit dem neuen Wert zurück zu td gehen, nachdem der Benutzer weg von der Eingabe klickt?

$(function() { 
 
    $(".departamento").one('click', function(e) { 
 
    e.stopPropagation(); 
 
    var currentEle = $(this); 
 
    var value = $(this).html(); 
 
    select = '<select class="form-control" id="departamento" name="departamento">' + 
 
     '<option name="Comercial" <?php echo ($departamento == "Comercial")?"selected":""; ?> >Comercial</option>' + 
 
     '<option value="Suporte Tecnico" <?php echo ($departamento == "Suporte Tecnico")?"selected":""; ?> >Suporte Técnico</option>' + 
 
     '<option value="Direcao" <?php echo ($departamento == "Direcao")?"selected":""; ?> >Direção</option>' + 
 
     '<option value="Formacao "<?php echo ($departamento == "Formacao")?"selected":""; ?> >Formação</option>' + 
 
     '</select>'; 
 
    currentEle.html(select); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Departamento</th> 
 
    <td class="departamento"> 
 
     <?php echo $departamento;?> 
 
    </td> 
 
    </tr> 
 
</table>

Dank!

Answer 1

Um dies zu erreichen, können Sie den Inhalt der td zurück auf das blur Ereignis der select schalten. Sie können auch die Logik aufräumen, um eine Klasse zu verwenden, um das Wechseln des Inhalts zu erlauben, so dass Sie one() nicht verwenden müssen, was nur den einmaligen Vorgang zulässt.

Beachten Sie auch, dass Sie die Logik verbessern können, die den Standardwert in der Auswahl auf Basis des Textes td auswählt, anstatt viel Spaghetti-PHP in den JS einfügen zu müssen. Versuchen Sie folgendes:

$(function() { 
 
    $(".departamento").on('click', function(e) { 
 
    e.stopPropagation(); 
 
    var $td = $(this); 
 

 
    if ($td.hasClass('active')) 
 
     return; 
 

 
    var value = $td.text().trim(); 
 
    $td.empty(); 
 
    var $select = $('<select class="form-control" id="departamento" name="departamento">' + 
 
     '<option name="Comercial">Comercial</option>' + 
 
     '<option value="Suporte Tecnico">Suporte Técnico</option>' + 
 
     '<option value="Direcao">Direção</option>' + 
 
     '<option value="Formacao">Formação</option>' + 
 
     '</select>').val(value).appendTo($td).focus(); 
 
     $td.addClass('active'); 
 
    }).on('blur', 'select', function() { 
 
    var $select = $(this); 
 
    var $td = $select.closest('td'); 
 
    $td.html($select.val()).removeClass('active'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Departamento</th> 
 
    <td class="departamento"> 
 
     Direcao 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

sollte dies tun:

$(document.body).on('change', 'select' ,function(){ 
    $('.departamento').text(this.value); 
}); 

einen Click-Handler bei der Auswahl hinzufügen und html von div mit der Klasse 'departamento' ändern.