运用事件委托方式，简单做表格的即时编辑。避免非事件委托时冒泡和this指向的问题。

最新推荐文章于 2024-05-02 18:12:22 发布

小飞侠十一

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量129

点赞数 1

文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_43182945/article/details/112171241

版权

这样的问题：直接用事件委托方式解决。省很多不必要的麻烦。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>表格的即时编辑</title>
</head>
<body>
	<table border="1" width="900" align="center" cellspacing="0" class="tab">
    	<tr>
        	<td>DATA</td>
        	<td>DATA</td>
        	<td>DATA</td>
        	<td>DATA</td>
    	</tr>
    	<tr>
        	<td>DATA</td>
        	<td>DATA</td>
        	<td>DATA</td>
        	<td>DATA</td>
    	</tr>
    	<tr>
        	<td>DATA</td>
        	<td>DATA</td>
        	<td>DATA</td>
        	<td>DATA</td>
    	</tr>
    	<tr>
        	<td>DATA</td>
        	<td>DATA</td>
       		<td>DATA</td>
        	<td>DATA</td>
    	</tr>
    	<tr>
        	<td>DATA</td>
        	<td>DATA</td>
        	<td>DATA</td>
        	<td>DATA</td>
    	</tr>
	</table>
</body>
<script>
var otab = document.querySelector(".tab");
//事件委托方式,利用冒泡。
otab.onclick = function(eve){
    var e = eve|| window.event;
    var tar = e.target || e.srcElement;
    if(tar.TagName === "TD"){  // 判断事件目标为td时，进行以下操作  TagName外，也可用nodeName（节点名）
        var inp = document.createElement("input");// 创建元素
        inp.type = "text";
        inp.value = tar.innerHTML;  // 将td的内容设置到输入框
        tar.innerHTML = "";  // 清空td内容
        tar.appendChild(inp);  // 将输入框放进去
        inp.onblur = function(){// 输入框的失去焦点事件
            tar.innerHTML = inp.value;// 将输入框的内容设置给td的内容
            // 此时：利用innerHTML的覆盖特性，覆盖inp
        }
    }
}
</script>
</html>

小飞侠十一

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
运用事件委托方式，简单做表格的即时编辑。避免非事件委托时冒泡和this指向的问题。

这样的问题：直接用事件委托方式解决。省很多不必要的麻烦。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格的即时编辑</title></head><body&gt
复制链接

扫一扫