html table edit the rows dynamically

Question

I have an html table and i want to edit the contents of the table based on a button click.

My HTML code:

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

and my javascript is

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

but the problem is when i click on the button only the first rown on the table is showing editable. otherthan that all the rows are immutable. Any help will be appreciated

Answer 1

You should use the class instead of id . Id's are meant to be unique .

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

Then in your javascript, you need to loop over the selected elements:

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