Table looses alignment after appending rows

Question

I implemented a search function where the rows of a table are generated with jquery as the user types the search input. Below is the state of the table before I start modifying the rows of the table with jquery.

After jquery operations steps in, my table loses its alignment with table headers and table rows for some reason. The script and the final state of the table is shown below. How do I resolve this issue ?

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 - it's not just code appender. Read about it behavour. In your case - you're appending '<tr>' and jQuery parses it like creating NEW tr tag in tbody, after that you're appending NEW td tags in TBODY not in TR. And it's the main problem. It just breaks your markup. Do it like this:

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

}