编辑：

Question

我在以下HTML页面中遇到问题。我有一个我想要的html表，当用户点击我页面上的某个td时，有人可以更改该td的内容。我认为最简单的方法是更改html标签。但是我该怎么做呢？或者您是否知道用户更改td-tag内容的其他解决方案？我也在使用AngularJS和JQuery，所以也许有一个很好的解决方案。

我在pastebin上有以下表格代码。（stackoverflow没有正确显示）http://pastebin.com/AnjpSbdq

其他我希望当用户点击我页面上的其他位置时，更改该内容的可能性正在消失。（也许当他按下进入时也是如此。）

感谢您的所有提示！

Answer 1

我认为最好在tds中设置带有文本类型的输入并使用您自己的值启动它，用户可以更改它...它就像旧的占位符

<input type='text' name='NAME' value='initiate-value'>

Answer 2

我同意@amin。用一些输入更容易替换td标签的内部内容。看起来应该是这样的。

var td = document.querySelector('td.clickToEdit');
td.onclick = function() {
  var input = document.createElement('input');
  input.value = td.textContent;
  td.innerHTML = '';
  td.appendChild(input);
  input.focus();

  //When input looses focus it gets deleted.
  input.onblur = function() {
    td.removeChild(input);
    td.textContent = input.value;
  }
}

编辑：

还有一种替代方法，即contentEditable="true"所有td。内容可编辑是一个html属性。您可以这样设置：

var tds = document.getElementsByTagName('td');
for(var i=0; i<tds.length; i++) {
  tds[i].contentEditable = 'true';
}

如何在点击时将hd-tag更改为html中的输入标记？

2 个答案:

编辑：