题目
完成一个可编辑的表格
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.tab{
margin: 0 auto;
width: 800px;
border: 1px solid #34495e;
/*合并相邻边框*/
border-collapse: collapse;
}
th,
td{
height: 30px;
width: 180px;
border: 1px solid #34495e;
box-sizing: border-box;
}
tr:nth-child(1){
background: #34495e;
color: #eee;
}
</style>
</head>
<body>
<table class="tab">
<tr>
<!--标题-->
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>专业</th>
</tr>
<tr>
<td>001</td>
<td>softeem</td>
<td>12</td>
<td>软件工程</td>
</tr>
<tr>
<td>002</td>
<td>狗蛋</td>
<td>18</td>
<td>软件工程</td>
</tr>
<tr>
<td>003</td>
<td>来福</td>
<td>16</td>
<td>挖掘机工程</td>
</tr>
</table>
<script src="js/jquery-1.11.3.js"></script>
<script>
$(function () {
//选中所有可编辑的单元格
$('.tab tr:not(:first-child)>td').click(function () {
let td = $(this);
//缓存单元格内部的文本
let txt = td.text();
//清除文本
td.text('');
//创建一个输入框对象
let input = $('<input type="text">');
input
// .width(td.width())
// .height(td.height())
.val(txt)
// .css('border','none')
.css({
"width":"100%",
"height":"100%",
"border":"0",
"outline":"0",
"padding":"0 5px"
});
console.log(input)
//阻止再次发生点击事件
// td.off('click');
//阻止输入框的点击事件传播
input.on('click',false);
//添加input节点到td中
td.append(input);
//当元素插入到指定位置之后,聚焦以及选中
input.focus().select();
//为输入框绑定失去焦点事件
input.on('blur',function () {
if (window.confirm('是否确认修改?')) {
td.text($(this).val());
}else {
td.text(txt);
}
td.on('click');
$(this).remove();
})
})
})
</script>
</body>
</html>
运行结果
总结
主要在于表格中的text文本和输入框input之间的关系。给所有需要编辑的单元格设置点击事件。点击后会创建一个输入框input对象,再给输入框设置一个失焦事件,及当输入完毕后鼠标点击他处触发的事件。事件为在表格插入文本,并移除输入框。