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