更改表格的内部文本答案

【问题标题】：Change inner txt of table更改表格的内部文本
【发布时间】：2020-12-11 04:57:29
【问题描述】：

我有一个包含姓名、姓氏等的表格。我应该使用输入更改点击的 td 的值。我设法更改了第一个 td 的值，但我不确定如何更改特定 td 的值。

这是我的代码。

let inp
let changevalue
let click = addEventListener("focus" ,function(){
    changevalue = document.querySelector("td")
  inp = document.createElement("input")
  inp.value = changevalue.innerHTML
  changevalue.innerHTML = " "
    changevalue.append(inp)
})
let newclick = addEventListener("blur" , function(){
    changevalue.innerHTML = inp.value
})

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%" id = "TB">
  <tr >
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr >
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
</body>
</html>

【问题讨论】：

看看这个stackoverflow.com/questions/46341171/…

标签： javascript

【解决方案1】：

您可以在每个td 元素上添加点击事件侦听器，并仅对动态创建的input 使用模糊事件。

const tds = document.querySelectorAll("#TB td");
tds.forEach(td => {
  td.addEventListener("click", e=>{
     let inp = document.createElement("input")
     inp.value = td.innerHTML
     td.innerHTML = " "
     td.append(inp);
     inp.focus();
     inp.addEventListener("blur", e=>{
        td.innerHTML = inp.value;
     });
  });
});

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%" id = "TB">
  <tr >
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr >
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
</body>
</html>

【讨论】：

谢谢。无论如何我可以使用这种方法添加输入吗？
@AramayisYeghiazaryan 你这是什么意思？
我的意思是使用‘this’方法选择td
@AramayisYeghiazaryan 如果您改用function(e)，则可以使用this 引用td。