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

我有两个问题：

当TD转换为输入字段时，我无法在其中写入新文本。我无法编辑文字。
当我在表格外部点击时，我希望输入字段使用其原始文本值转换回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>

Answer 2

我建议您隐藏/显示td /输入框而不是更改html，这样可以避免以后遇到很多麻烦。

在tds中内联编辑

2 个答案: