html表格动态编辑行

问题描述：

我有一个html表格，我想根据点击按钮来编辑表格的内容。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是显示可编辑的点击。而不是所有的行都是不可变的。任何帮助将不胜感激

我想你的JavaScript可能是寻找一个ID，但它找到的第一个和停止。如果你有多个对象，最好使用类。您可能需要搜索具有相同类的所有div并遍历每个div。 – uberdanzik 2013-02-10 05:16:53

答

你应该使用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表格动态编辑行

相关推荐