Question

我有tr，如果您点击它，它将更改为select并允许用户选择一个选项。在用户点击输入后，如何使用新值返回td？

＆＃13;

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

＆＃13;

<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>

＆＃13;

谢谢！

Answer 1

这应该做：

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

在select上添加一个click处理程序，并使用class“departamento”更改div的html。

Answer 2

要实现此目的，您可以将td的内容切换回blur的{{1}}事件。您还可以整理逻辑以使用类来允许切换内容，这样您就不需要使用select，这只会允许操作发生一次。

另请注意，您可以通过基于one()的文本来改进选择默认值的逻辑，而不必将大量的意大利面PHP放入JS中。试试这个：

td

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

更改td内容以进行选择，反之亦然

2 个答案: