javascript - 表在附加行后失去对齐

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 中创建新的 tr 标签，之后你在 TBODY 中而不是在 TR 中附加新的 td 标签。这是主要问题。它只会破坏您的标记。这样做:

$("#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);

}