javascript - 更改 td 内容以选择，反之亦然

Question

我有一个 tr，如果您单击它，它将变为 select 并允许用户选择一个选项。在用户点击离开输入后，如何让它返回到具有新值的 td？

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

谢谢!

Answer 1

要实现此目的，您可以在 select 的 blur 事件中将 td 的内容切换回原位。您还可以整理逻辑以使用一个类来允许内容切换，这样您就不需要使用 one()，它只允许操作发生一次。

另请注意，您可以根据 td 的文本来改进在 select 中选择默认值的逻辑，而不必将大量意大利面条式 PHP 放入JS。试试这个:

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