javascript - 发生模糊事件时如何更改节点？

Question

源 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>

事件:在input中输入test1(其id)后，源HTML结构变成目标HTML结构是 data1 并且鼠标焦点离开输入。

目标 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>