<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
/* 字体大小 */
font-size: 16px;
/* 文本对齐方式 */
text-align: center;
}
table {
width: 100%;
border: 1px solid skyblue;
border-collapse: collapse;
line-height: 33px;
}
td {
width: 20%;
border: 1px solid skyblue;
/*文字不换行*/
white-space: nowrap;
overflow: hidden;
}
.inputOne {
/* 去掉input默认边框 */
outline: none;
border:none;
line-height: 33px; width: 100%; height: 100%; display: inline; background-color: #ffe9ac; } </style> <script> window.onload = function (e) { // 获取所有的单元格 var td = document.getElementsByTagName("td"); for (var i = 0; i < td.length; i++) { td[i].index = i; td[i].onclick = function (e) { if (e.target.tagName.toLowerCase() == "td") { var input = document.createElement("input"); input.type = "text"; input.className = "inputOne"; input.value = this.innerHTML; td[this.index].innerHTML = ""; td[this.index].appendChild(input); input.focus(); input.onblur = function () { this.parentNode.innerHTML = input.value; input.remove(); }; // 阻止冒泡 input.onclick = function (evt) { evt = evt || window.event; evt.stopPropagation() ? e.stopPropagation() : e.cancelBubble = true; } } }; } } </script></head><body><table> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr></table></body></html>
5443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
