Question

我的桌子上有空身：

<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填充正文，它从数据库获取数据，并且这个Ajax函数构造表的主体包含数据：

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创建了Edit-button。当您单击此按钮时，行中每列中的文本字段必须使用单元格中的值转换为input type=text，因此我可以更改值，然后在所选行中保存此更改。所有这一切都必须由ajax工作。

怎么做？

Answer 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/

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

1 个答案: