javascript - tds 中的内联编辑

Question

我有以下代码来启用 td 单元格的内联编辑:

$('.edit_td').click(function(e) {
    e.stopPropagation();
    resetEditedCells(); 
    $(this).addClass('active').html('<input type="text" value="' + $(this).html() + '">');
});

function resetEditedCells() {
        $('.edit_td.active').html(function() {
        return $(this).find('input').val();
    });
}

$(document).click(function() {
    if($('.edit_td').hasClass('active')) {
        var fisk = $('.active input[type=text]').val();
        $('.edit_td').find('input').hide().html(fisk);
    }
});

我有两个问题:

1. 当 TD 转换为输入字段时，我无法在其中写入新文本。我无法编辑文本。

2. 当我在表格外部单击时，我希望输入字段转换回带有原始文本值的 td，但上面的代码并没有这样做。输入字段被删除，但文本也被删除/隐藏。我只想让输入消失。

谁能帮帮我？

Answer 1

这是您想要的工作版本。

const $edits = $('.edit_td');

$edits.on('click', function(e){
    e.stopPropagation();
    const $this = $(this);
    if(!$this.hasClass('active')){
      $this.addClass('active');
      const val = $this.html();
      console.log(val);
      $this.html(`<input type="text" value="${val}"/>`);
    }
});

function removeActive() {
  $edits.each(function() {
    const $this = $(this);
    if ($this.hasClass('active')) {
      const val = $this.find('input').val();
      $this.empty();
      $this.html(val);
      $this.removeClass('active');
    }
  });
}

$(document).on('click', removeActive);

table {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="edit_td">Test 123</td>
  </tr>
  <tr>
    <td class="edit_td">Test 456</td>
  </tr>
  <tr>
    <td class="edit_td">Test 789</td>
  </tr>
</table>