时间戳

首页 > 解决方案 > 更改表格的内部 txt

javascript - 更改表格的内部 txt

问题描述

我有一个包含姓名、姓氏等的表格。我应该使用输入更改单击的 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>

标签： javascript

解决方案

您可以在每个元素上添加 click 事件侦听td器，并将 blur 事件仅用于动态创建的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>

推荐阅读