Javascript 将文本更改为行上的输入

我想在用户单击更新按钮时将文本更改为输入。它将更改一行中的所有文本。下面是我做的例子。如何将所有文本更改为输入？我能够使文字隐藏，但坚持把它全部改为输入

var-button=document.querySelectorAll（'.upd'）；
var tableColumn=document.querySelectorAll（'td'），
排；
对于（变量i=0；i

td，
tr，
th{
边框：1px纯黑；
填充：5px
}
桌子{
边界塌陷：塌陷；
}

帐户名
用户名
密码
评论
文本1
文本2
文本3
文本4
更新删除

您应该注意不要隐式创建全局变量。迭代每个

td

，隐藏

span

并相应地创建

输入。此外，由于
span
s包含文本，因此应使用
textContent
而不是
innerHTML
：


var-button=document.querySelectorAll（'.upd'）；
var tableColumn=document.querySelectorAll（'td'），
排；
for（设i=0；i{
const span=td.children[0]；
span.style.display='none'；
const text=span.textContent；
const input=td.appendChild（document.createElement（'input'））
input.value=文本；
input.size=Math.max（text.length/4*4,4）；
});
});
}
td，
tr，
th{
边框：1px纯黑；
填充：5px
}
桌子{
边界塌陷：塌陷；
}

帐户名
用户名
密码
评论
文本1
文本2
文本3
文本4
更新删除
var button=document.querySelectorAll（'.upd'）；
var tableColumn=document.querySelectorAll（'td'），
排；
对于（变量i=0；i
您可以使用jQuery尝试此代码，它更简单
https://codepen.io/gio0157/pen/deXXvz?editors=1010

 <table>
  <thead>
    <tr>
      <th>Account Name</th>
      <th>Username</th>
      <th>Password</th>
      <th>remark</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>text 1</span><input type="text" class="hide"/></td>
      <td><span>text 2</span><input type="text" class="hide"/></td>
      <td><span>text 3</span><input type="text" class="hide"/></td>
      <td><span>text 4</span><input type="text" class="hide"/></td>
      <td>
        <button class="upd" id="update">Update</button> <button class="del" id="delete">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}
td,th {
  border: solid 1px black;
  text-align: center;
  padding: 0;
  margin: 0;
  width: calc(100% / 5);
}
.hide{
  display: none;
}



$(document).ready(function(){
  $('#update').click(function(){
    if(!$(this).hasClass('active')){
      $(this).addClass('active');
      $('td span').addClass('hide');
      $('td input').removeClass('hide');
      let inputs = $('td input');
      for(let i=0; i<inputs.length; i++){
        $(inputs[i]).val($(inputs[i]).siblings().text());      
      }
    }else{
      $(this).removeClass('active');
      $('td span').removeClass('hide');
      $('td input').addClass('hide');

      let texts = $('td span');
      for(let i=0; i<texts.length; i++){
        $(texts[i]).html($(texts[i]).siblings().val());      
      }
    }
    $('#delete').click(function(){
      $(this).removeClass('active');
      $('td span').removeClass('hide');
      $('td input').addClass('hide');

      let inputs = $('td input');
      for(let i=0; i<inputs.length; i++){
        $(inputs[i]).val($(inputs[i]).siblings().text());      
      }
    });
  });
});


帐户名
用户名
密码
评论
文本1
文本2
文本3
文本4
更新删除
桌子{
边界塌陷：塌陷；
边界间距：0；
宽度：100%；
边框：1px实心#ddd；
}
td，th{
边框：实心1px黑色；
文本对齐：居中；
填充：0；
保证金：0；
宽度：计算值（100%/5）；
}
.隐藏{
显示：无；
}
$（文档）.ready（函数（）{
$（“#更新”）。单击（函数（）{
if（！$（this）.hasClass（'active'））{
$（this.addClass（'active'）；
$（'td span'）.addClass（'hide'）；
$（'td input'）.removeClass（'hide'）；
让输入=$（'td input'）；
对于（让i=0；i将输入元素作为HTML输出的一部分，在span之后，使其变得简单。使用以下函数切换它们

function onClickShowInput(evt) {
    evt.target.className = 'hide'
    evt.target.nextElementSibling.className = ''
}

类似地，从输入显示范围的模糊

function onBlurShowSpan(evt) {
    evt.target.className = 'hide'
    evt.target.previousElementSibling.className = ''
}

最后附上相关事件

document.querySelectorAll('span').forEach(span => span.addEventListener('click', onClickShowInput))
document.querySelectorAll('input').forEach(input => input.addEventListener('click', onBlurShowSpan))

通过预生成有助于清理代码和js逻辑的输入标记使其更简单。我在下面添加了一个示例代码。感谢您的回答和详细信息。我可以知道
[…tds]上的点（.）是什么吗.forEach
表示。它将
tds
（一个
HTMLCollection
）转换为一个数组。与
HTMLCollection
不同，数组可以使用
forEach
进行迭代。（
forEach
或其他数组方法通常比
更适合于
循环-更好的抽象性、无需手动迭代、函数的可组合性和范围）
[…arrayLikeVar]
与
数组类似。
document.querySelectorAll('span').forEach(span => span.addEventListener('click', onClickShowInput))
document.querySelectorAll('input').forEach(input => input.addEventListener('click', onBlurShowSpan))