0

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

しかし、問題は、ボタンをクリックすると、テーブルの最初の行だけが編集可能に表示されることです。それ以外は、すべての行が不変です。どんな助けでも大歓迎です

4

1 に答える 1

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;
  }
}
于 2013-02-10T05:26:26.940 に答える