javascript - html表动态编辑行

Question

我有一个 html 表格，我想通过单击按钮来编辑表格的内容。

我的 HTML 代码：

 <form name="myform">
<table id="tblFollow" >
    {% for key, value in result.iteritems() %}
<tr>
    <td > {{ key }}</td>
    <td> <div id="editableText" > {{ value }} </div></td>

</tr>
    {%  endfor %}
</tbody>
   </table>
<h>  {{  passvalue }} </h> <br>
<input type="button" onclick="changeContent()" value="Change content">
 </form>

我的javascript是

    function changeContent(){
        var newstate = !editableText.isContentEditable
        editableText.contentEditable = newstate
        editableText.className = (newstate)
    }

但问题是当我点击按钮时，只有桌子上的第一排显示可编辑。除此之外，所有行都是不可变的。任何帮助将不胜感激

Answer 1

您应该使用class代替id。Id 是唯一的。

<div class="editableText" > {{ value }} </div>

然后在您的 javascript 中，您需要遍历所选元素：

function changeContent(){
  var editables = document.getElementsByClassName('editableText');
  for (var i = 0; i < editables.length; i++) {
    var newstate = !editables[i].isContentEditable;
    editables[i].contentEditable = newstate;
  }
}