效果：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--引入JS和CSS文件-->
<link rel="stylesheet" href="css/editTable.css">
<script src="js/editTable.js"></script>
</head>
<body>
<!--编写HTML-->
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>乐进</td>
</tr>
<tr>
<td>2</td>
<td>张辽</td>
</tr>
<tr>
<td>3</td>
<td>张郃</td>
</tr>
<tr>
<td>4</td>
<td>于禁</td>
</tr>
<tr>
<td>5</td>
<td>徐晃</td>
</tr>
</tbody>
</table>
</body>
</html>
//编写JS
// 1.页面载入事件
window.onload = function (){
// 2.隔行换肤
var tbody = document.getElementsByTagName('tbody')[0];
var trs = tbody.getElementsByTagName('tr');
// 3.获取所有td
var tds = [];
for(var i=0; i<trs.length; i++){
tds.push(trs[i].children[1]);
if(i%2 == 0){
trs[i].style.backgroundColor='pink';
}else{
trs[i].style.backgroundColor='skyblue';
}
}
// console.log(tds);
// 4.绑定单击事件
for(var i=0; i<tds.length; i++){
tds[i].onclick=function(){
var td =this;
// 1.设置单input
if(td.children.length >=1 ){
return false;
}
// 2.获取td里的值
var text = td.innerHTML;
td.innerHTML='';
// 3.创建input
var input = document.createElement('input');
// 4.给input样式
input.style.width = getStyle(td, 'width');
input.style.height = getStyle(td, 'height');
input.style.outline = '0 none';
input.style.fontSize = getStyle(td, 'fontSize');
input.style.backgroundColor = getStyle(td, 'backgroundColor');
this.appendChild(input);
// 5.给input赋值
input.value = text;
// 6.获取焦点
input.focus();
// 7.绑定键盘事件
input.onkeyup = function(evt){
var e = window.event || evt;
// 1.获取键盘事件
var keycode = e.keyCode;
// 2.13是回车，27是esc
if(keycode == 13){
td.innerHTML = this.value;
}
if(keycode == 27){
td.innerHTML = text;
}
}
};
}
};
//为了兼容各个浏览器，所以封装一个获取样式的函数
function getStyle(element, styleName){
if(element.currentStyle){
//说明是IE浏览器
return element.currentStyle[styleName]; // 变量不能用于对象的属性，所以这里必须使用方括号的形式
}else{
//说明是非IE浏览器
return getComputedStyle(element)[styleName]; // 变量不能用于对象的属性，所以这里必须使用方括号的形式
}
}
*{
/*编写CSS*/
margin:0;
padding:0;
border:0 none;
}
table,th,td{
border:solid 1px #000;
border-collapse:collapse;
}
table{
width:400px;
margin:10px auto;
}
th,td{
width:50%;
padding:3px;
}