我有以下代码来启用 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,但上面的代码并没有这样做。输入字段被删除,但文本也被删除/隐藏。我只想让输入消失。
谁能帮帮我?
最佳答案
这是您想要的工作版本。
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>
关于javascript - tds 中的内联编辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23905632/