附加行后表失去对齐

Question

我实现了一个搜索功能，当用户键入搜索输入时，使用jquery生成表的行。下面是我开始使用jquery修改表行之前表的状态。

在jquery操作步骤之后，由于某种原因，我的表失去了与表头和表行的对齐。脚本和表的最终状态如下所示。我该如何解决这个问题？

FIDDLE ：https://jsfiddle.net/cemremengu/k3m4onnL/

$("#member-table-body").empty();

for (i = 0; i < data.result.length; i++) {
    $("#member-table tbody").append("<tr>");

    var id = data.result[i].MemberId;

    var actions = $('<td><a href="/Members/Edit?MemberId='+ id + '">Detay</a></td>');


    var memberName = $("<td>" + data.result[i].MemberName + "</td>)");
    var director = $("<td>" + data.result[i].DirectorFullName + "</td>)");
    var location = $("<td>" + data.result[i].Location + "</td>)");

    $("#member-table-body").append(memberName);
    $("#member-table-body").append(director);
    $("#member-table-body").append(location);
    $("#member-table-body").append(actions);



    $("#member-table-body").append("</tr>");

}

Answer 1

jQuery.append - 这不仅仅是代码附加程序。阅读它的行为。在你的情况下 - 你附加'<tr>'并且jQuery解析它就像在tbody中创建NEW tr标签一样，之后你在TBODY中添加NEW td标签而不是在TR中。这是主要问题。它只会打破你的标记。这样做：

$("#member-table-body").empty();

for (i = 0; i < data.result.length; i++) {
    var tr = $('<tr></tr>');

    var id = data.result[i].MemberId;

    var actions = $('<td><a href="/Members/Edit?MemberId='+ id + '">Detay</a></td>');


    var memberName = $("<td>" + data.result[i].MemberName + "</td>)");
    var director = $("<td>" + data.result[i].DirectorFullName + "</td>)");
    var location = $("<td>" + data.result[i].Location + "</td>)");

    tr.append(memberName);
    tr.append(director);
    tr.append(location);
    tr.append(actions);



    $("#member-table-body").append(tr);

}