使用 AJAX 动态编辑表格中的行答案

【问题标题】：Dynamic edit rows in the table with AJAX使用 AJAX 动态编辑表格中的行
【发布时间】：2017-07-08 19:03:04
【问题描述】：

我的桌子是空的：

<table id="tablem" border="1" width="100">
    <thead>
        <tr>
            <th style="width: 10%">PageName</th>
            <th style="width: 5%">Lang</th>
            <th style="width: 10%">ControlName</th>
            <th style="width: 70%">ControlValue</th>
            <th style="width: 5%">Edit</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

我通过 AJAX-request 填充 body，它从数据库中获取数据，这个 Ajax-function 用数据构造表的 body：

function ForSearching(args, callback) {
$.ajax({
    url: "/source_pages/SearchForMultilang.ashx",
    type: "POST",
    dataType: "json",
    data: args,
}).success(function(data) {
    var table = $("#tablem tbody");
    $("#tablem tbody").empty();
    callback(data);
    $.each(data, function (idx, elem) {
        table.append('<tr><td>' + elem.PageName + '</td><td>' + elem.Lang + '</td><td>' + elem.ControlName + '</td><td>' + elem.ControlValue + '</td><td><input type="button" id="btnedt" value="Edit" /></td></tr>');
    });
});
}

表格被创建，由数据填充，并且在最后一列Ajax 创建了编辑按钮。当您单击此按钮时，行中每一列中的文本字段必须转换为 input type=text 并带有单元格中的值，因此我可以更改值并将这些更改保存在所选行中。而这一切都必须通过 ajax 来实现。

如何做到这一点？

【问题讨论】：

标签： html asp.net ajax html-table

【解决方案1】：

我建议将此代码女巫更改选择器放在此按钮的单击处理程序中

$('td').each(function(){
   $(this).html($('<input>',{type:'text', value: $(this).html()}));
});

https://jsfiddle.net/urp83mtq/1/

编辑：我刚刚看到您希望每行有一个按钮

$(':button').each(function(){
    $(this).on('click',function(){
        $(this).parent().parent().children().each(function(){
            if($(this).children().length==0)
                    $(this).html($('<input>',{type:'text', value: $(this).html()}));
       });
  });
});

https://jsfiddle.net/urp83mtq/2/

【讨论】：