Question

我想添加一个按钮来编辑表格中的行。我的代码是：

$("#tabprincipal tbody").html("");
    $.getJSON("carrega_usuarios.php?vPagina=" + 0+ "&vQtdeLinhas=" + 10,function(data){
    $.each(data.users, function(i,user){
    var newRow =
    "<tr>"
    +"<td>"+user.ID+"</td>"
    +"<td>"+user.USER+"</td>"
    +"<td>"+user.GROUP+"</td>"
    +"<td>"+user.NUMBER+"</td>"
    +"<td>"+user.STATE+"</td>"
    +"<td>"+user.BIRTH+"</td>"
    +"<td> <button id='but1' class='botaoadd'>hello </button> </td>"
    +"</tr>" ;
    $(newRow).appendTo("#tabprincipal tbody");
    });
    });

但按钮不会出现在表格单元格中。

Answer 1

如何使用jQuery制作动态表的一个非常基本的例子

HTML

<table id="tabprincipal">
    <tbody></tbody>
</table>

<button id="addRow">Add row</button>

CSS

.tabrow td div { width: 100%; }

.tabrow.editing td div:first-of-type, 
.tabrow.closed td div:last-of-type  {
    display:none;
}

.tabrow.editing td div:last-of-type, 
.tabrow.closed td div:first-of-type  {
    display:block;
}

JAVASCRIPT

jQuery(function(){
    $("body").on("click","#addRow",function(ev){
        var len = $("#tabprincipal tbody tr").toArray().length;
        var newRow = "<tr class='tabrow closed'>"
        +"<td><div>"+len+"</div><div><input type='text' value='"+len+"'/></div></td>"
        +"<td><div>A"+len+"</div><div><input type='text' value='A"+len+"'/></div></td>"
        +"<td><div><button class='editRow'>Edit row</button></div><div><button class='saveRow'>Save row</button></div></td>"
        +"</tr>";
        $(newRow).appendTo("#tabprincipal tbody");
    });

    $("body").on("click",".editRow",function(ev){
       $(this).parents(".tabrow").removeClass("closed").addClass("editing");
    });

    $("body").on("click",".saveRow",function(ev){
        var row = $(this).parents(".tabrow");
        // update the cells
        row.find("td").each(function(){
           // new value
           var newVal = $(this).find("input").val();
           $(this).find("div:first").html(newVal);
        });
        row.removeClass("editing").addClass("closed");
    });
});

在行动here

上查看

JQuery在表行中添加一个按钮

1 个答案: