20.JavaScript如何做表格即时编辑，原生js的表格即时编辑怎么做?

2021-10-26 18:32:24 阅读：144 来源： 互联网

标签：value style 表格 txtDom 即时文本框编辑 innerHTML var

在这里插入图片描述

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
td{
width:120px;
}
</style>
</head>
<body>
<input id="txtId" type="text" style="display:none;width:100px" οnblur="save(this)" />
<table id="t">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td colspan="2">操作</td>
</tr>
<tr>
<td><span>狗蛋</span></td>
<td><span>男</span></td>
<td><span>18</span></td>
<td><input id="btnUpdate" type="button" value="修改"  /></td>
<td><input id="btnDelete" type="button" value="删除"  /></td>
</tr>
<tr>
<td><span>二愣子</span></td>
<td><span>女</span></td>
<td><span>19</span></td>
<td ><input type="button" value="修改"  /></td>
<td ><input type="button" value="删除"  /></td>
</tr>
<tr>
<td><span>三愣子</span></td>
<td><span>女</span></td>
<td><span>19</span></td>
<td ><input type="button" value="修改"  /></td>
<td ><input type="button" value="删除"  /></td>
</tr>
<tr>
<td><span>四愣子</span></td>
<td><span>女</span></td>
<td><span>19</span></td>
<td ><input type="button" value="修改"  /></td>
<td ><input type="button" value="删除"  /></td>
</tr>
</table>
</body>
</html>


<script type="text/javascript">
//
//1、点击单元格：
//    1)、出现文本框（创建）
//    2)、把单元格里的内容显示在文本框里
function edit(tdDom){
//1、让span消失
tdDom.firstElementChild.style.display="none";
//2、让文本框显示(先把文本框作为当前td的孩子)；
var txtDom = document.getElementById("txtId");
tdDom.appendChild(txtDom);
txtDom.style.display="block";

//3、span的innerHTML赋给文本框的value
txtDom.value = tdDom.firstElementChild.innerHTML;
txtDom.focus();//获得焦点
}




//2、当光标离开文本框：
//    1）、把文本框的内容显示在单元格里
//    2)、把文本框删除掉；


function save(txtDom){
//1、让span显示
txtDom.previousElementSibling.style.display="block";
//2、让文本框消失
txtDom.style.display="none";

//3、文本框的value赋给span的innerHTML
txtDom.previousElementSibling.innerHTML=txtDom.value;
}


window.onload = function(){
//给需要编辑的单元格增加onclick事件
var tbody = document.getElementById("t").firstElementChild;
var trs = tbody.children;
for(var i=1;i<trs.length;i++){
for(var j=0;j<trs[i].children.length-2;j++){
trs[i].children[j].onclick = function(){
edit(this);//this是td。
}
}
}

}

</script>

标签：value,style,表格,txtDom,即时,文本框,编辑,innerHTML,var
来源： https://blog.csdn.net/qq_44930379/article/details/120977831

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

20.JavaScript如何做表格即时编辑，原生js的表格即时编辑怎么做?