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)
    }

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

Answer 1

您应该使用class代替id。 Id's are meant to be unique

<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;
  }
}

html表动态编辑行

1 个答案: