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>

事件：在Source HTML struture的{{1}}中键入Target HTML struture后，test1变成input，鼠标焦点移到输入之外。 / p>

目标HTML结构。

data1

这是我的JS。

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

为什么我的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

您的代码中有几个问题：

您需要将事件侦听器添加到input本身，而不是document对象。然后，您可以简单地使用event.target而不是activeElement（在blur事件之后输入不再有效…）
您正在删除ob.parentNode后尝试访问ob。尝试先将其存储在变量中：

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: Loop Over querySelectorAll Matches

Answer 3

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);

Answer 4

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>

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

4 个答案: