Javascript 使用jquery和twig编辑表行

我在我的小树枝模板中动态生成了表：

{% for a in abc %}
   <tr>
      <td>
          {{ a.key }}
      </td>
    <td>
         {{ a.value }}
    </td>
    <td class="td-actions">
        <button id='EditSave' data-text="Save" data-id="{{ a.id }}">Edit</button>
        <button id='Cancel' data-text="Cancel" style="display:none;">Cancel</button>
    </td>
 </tr>
{% endfor %}

---

您需要使用

class

选择器而不是

id

，因为这里有多个

trs

。此外，您还可以按如下方式更改html：

{% for a in abc %}
       <tr>
          <td>
 <!--added here span and input with values-->
             <span> {{ a.key }}</span><input type="text" class="key" value="{{ a.key }}">
          </td>
        <td>
             <span>{{ a.value }}</span><input type="text" class="value" value="{{ a.value }}">
        </td>
        <td class="td-actions">
<!-- change here class-->
            <button class='EditSave' data-text="Save" data-id="{{ a.id }}">Edit</button>
            <button class='Cancel' data-text="Cancel" style="display:none;">Cancel</button>
        </td>
     </tr>
{% endfor %}

A.
B
编辑
取消
B
D
编辑
取消

你救了我。多谢各位@我帮助的SwatiGlad。如果这解决了您的问题，您可以将此答案设置为已接受：）

{% for a in abc %}
       <tr>
          <td>
 <!--added here span and input with values-->
             <span> {{ a.key }}</span><input type="text" class="key" value="{{ a.key }}">
          </td>
        <td>
             <span>{{ a.value }}</span><input type="text" class="value" value="{{ a.value }}">
        </td>
        <td class="td-actions">
<!-- change here class-->
            <button class='EditSave' data-text="Save" data-id="{{ a.id }}">Edit</button>
            <button class='Cancel' data-text="Cancel" style="display:none;">Cancel</button>
        </td>
     </tr>
{% endfor %}