发生模糊事件时如何更改节点?

Question

Source HTML 结构。

<table>
<tr>
<td>class</td>
<td><input type="text" id="data1"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>

事件：在 id 为data1且鼠标焦点退出输入的input中键入test1后，Source HTML struture将变为Target HTML struture。

目标 HTML 结构。

<table>
<tr>
<td>class</td>
<td>test1</td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>

这是我的JS。

function  changeNode(event){
ob =document.activeElement;
_str = ob.value;
ob.parentNode.removeChild(ob);
ob.parentNode.innerText = _str;    
} 
document.addEventListener("blur",changeNode,true);

为什么我的JS无法实现预期目标？
如何解决？

Answer 1

您正在选择活动元素，而事件是对象的焦点丢失。 您应该选择event.target作为 ob，您的代码应该可以工作：

另外：您不需要删除对象，覆盖所有内部文本，因此对象会自动删除。

function  changeNode(event){
ob = event.target;
_str = ob.value;
ob.parentNode.innerText = _str;    
} 
document.addEventListener("blur",changeNode,true);

<table> 
<tr> 
<td>class</td> 
<td><input type="text" id="data1"></td> 
</tr> 
<tr>
<td>name</td>
<td><input type="text" id="data2"></td> 
</tr> 
</table>

Answer 2

代码中的几个问题：

1. 您需要将事件侦听器添加到input本身，而不是document对象。然后，您可以简单地使用event.target而不是activeElement(输入在blur事件后不再处于活动状态......

2. 您正在尝试在删除ob后访问ob.parentNode。首先尝试将其存储在变量中：

function changeNode(event) {
var ob = event.target;
var cell = ob.parentNode;
var _str = ob.value;
cell.removeChild(ob);
cell.innerText = _str;
}
document.querySelectorAll("input").forEach(function(input) {
input.addEventListener("blur", changeNode);
});

<table>
<tr>
<td>class</td>
<td><input type="text" id="data1"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>

注：querySelectorAll(…).forEach在某些旧浏览器中可能不可靠，如果需要支持它们，请参阅 css-tricks.com：循环查询选择器所有匹配项

Answer 3

function  changeNode(event){
var ob=event.target;
ob.parentNode.append(ob.value);
ob.parentNode.removeChild(ob); 
} 
document.getElementById("data1").addEventListener("blur",changeNode,true);

<table>
<tr>
<td>class</td>
<td><input type="text" id="data1"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>

Answer 4

function changeNode(event) {
var ob = event.target;
var cell = ob.parentNode;
var _str = ob.value;
cell.removeChild(ob);
cell.innerText = _str;
}
document.addEventListener("blur",changeNode,true);