使用 jquery 和 twig 編輯表格行

Question

我在動態生成的 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 %}

我制作了我的 js function，它會在點擊時更改屬性。

我是 js 新手，我想進一步完成的是在特定行“編輯”上單擊這兩個字段變為可編輯。

我知道如何實現 ajax 但不知道如何使用 twig 和 jquery 進行訪問。

我的功能：

$(document).ready(function(){

//getting id of specific column
var id = $(this).data('id');

$("#EditSave").click(function(){
    var btnText = $(this).text();
    if(btnText === 'Edit')
    {
        $(this).text('Save');
        $('#Cancel').show();
    }
    else
    {
        $(this).text('Edit');
        $('#Cancel').hide();
    }
});

$('#Cancel').click(function(){
    $(this).hide();
    $('#EditSave').text('Edit');
 });
});

Answer 1

您需要使用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 %}

現在，EditSave 的EditSave您檢查使用$(this).closest("tr")來獲取當前行 tr 並隱藏spans並顯示輸入框，如果進行了更改，那么您只需要從輸入框和將它們設置為 span 並使用所需數據進行 ajax 調用。

演示代碼：

 $(document).ready(function() { $("#mytable input").hide()//hide input from table $(".EditSave").click(function() { var selector = $(this).closest("tr") var id = $(this).data('id'); var btnText = $(this).text(); if (btnText === 'Edit') { $(this).text('Save'); $(this).next("button").show(); //hide selector.find("td span").hide() //span hide selector.find("td input").show() //show inputs } else { $(this).text('Edit'); $(this).next("button").hide(); selector.find("td span").show() selector.find("td input").hide() //get values from input box which is edited var key = selector.find(".key").val(); var value = selector.find(".value").val() //your ajax call put here to send both value and id as well //put updated values in span again add this inside success fn of ajax call selector.find(" td:eq(0) span").text(key) selector.find(" td:eq(1) span").text(value) } }); $('.Cancel').click(function() { $(this).hide(); $(this).prev(".EditSave").text('Edit'); $(this).closest("tr").find("td span").show() $(this).closest("tr").find("td input").hide() }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="mytable"> <tr> <td> <span> A</span><input type="text" class="key" value="A"> </td> <td> <span> B </span><input type="text" class="value" value="B"> </td> <td class="td-actions"> <button class='EditSave' data-text="Save" data-id="A">Edit</button> <button class='Cancel' data-text="Cancel" style="display:none;">Cancel</button> </td> </tr> <tr> <td> <span>B </span><input type="text" class="key" value="B"> </td> <td> <span> D </span><input type="text" class="value" value="D"> </td> <td class="td-actions"> <button class='EditSave' data-text="Save" data-id="D">Edit</button> <button class='Cancel' data-text="Cancel" style="display:none;">Cancel</button> </td> </tr> </table>