javascript - 表格用户界面设置不正确

我有一个引导表，表标题和使用javascript函数动态创建的表行。问题是动态创建的行看起来非常难看：

<div class="widget-content nopadding step1table">
    <table class="table table-bordered table-responsive">
        <tr style="background-color:#002060" class="fontcolor">
            <th>
                <label for="No">#</label>
            </th>
            <th>
                <label for="">Book No</label>
            </th>
            <th>
                <label for="">Name</label>
            </th>
            <th>
                <label for="">ISBN</label>
            </th>
            <th>
                <label for="">Dept</label>
            </th>
            <th>
                <label for="">Price</label>
            </th>
            <th>
                <label for="">Action</label>
            </th>
        </tr>
    </table>
</div>

function drawRow(obj) {
    var row = $("<tr>")
    $(".bktbl").append(row);
    row.append($("<td><p>" + obj.Id + "&nbsp;&nbsp;</p></td>"));
    row.append($("<td><p>" + obj.bookno+ "&nbsp;&nbsp;</p></td>"));
    row.append($("<td><p>" + obj.isbn + "&nbsp;&nbsp;</p></td>"));
    row.append($("<td><p>" + obj.dept + "&nbsp;&nbsp;</p></td>"));
    row.append($("<td><p>" + obj.price + "&nbsp;&nbsp;</p></td>"));
    row.append($("<td class='imgclose'><p>" + '<img src="' + '/Content/Images/crossimg.png' + '"  width:"225px" height:"225px" />' + "</p></td>"));
}

将所有动态创建的行压缩在一起。我该如何解决？

最佳答案

我觉得您必须在将所有tds追加到行之后追加行，并且必须使用$(".step1table table tbody")适当的选择器：

function drawRow(JobjectArray) {

    var row = $("<tr>")

    row.append($("<td><p>" + obj.Id + "&nbsp;&nbsp;</p></td>"));
    row.append($("<td><p>" + obj.bookno+ "&nbsp;&nbsp;</p></td>"));
    row.append($("<td><p>" + obj.isbn + "&nbsp;&nbsp;</p></td>"));
    row.append($("<td><p>" + obj.dept + "&nbsp;&nbsp;</p></td>"));
    row.append($("<td><p>" + obj.price + "&nbsp;&nbsp;</p></td>"));
    row.append($("<td class='imgclose'><p>" + '<img src="' + '/Content/Images/crossimg.png' + '"  width:"225px" height:"225px" />' + "</p></td>"));

    $(".step1table table tbody").append(row);  // <-----should be placed here.

}

step1table是div元素，用于保存您的table HTMLElement。