如题,直接上代码
<td id="name" class="text-c modify"></td>
$('.modify').click(function () {
//用正则表达式判断表格内容是否有输入框,如果有就不触发点击事件
let reg = /<[^>]+>/g;
if (reg.test($(this).html())) {
return ;
}
//用jQuery创建输入框,类型为text,样式用h-ui样式,name为单元格id,value为单元格内容
let input = $('<input>', {
type: 'text',
class: 'form-control',
name: $(this).prop('id'),
value: $(this).html()
});
$(this).empty(); //清空单元格
$(this).append(input); //将创建的输入框放入单元格
input.focus(); //给输入框焦点,没有这个会导致输入框无法选中
//给输入框绑定失去焦点事件,在失去焦点以后,清空单元格,并将输入框的值放入单元格中
input.on('blur', function () {
let td = $(this).parent();
td.empty();
td.html($(this).val());
})
});