Question

我有一个使用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>"));
}

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

Answer 1

我觉得你必须在所有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是包含table HTMLElement的div元素。

Answer 2

首先，您为该函数提供的参数称为JobjectArray，但您尝试从obj检索属性。其次，table元素上没有step1table类 - 您需要添加它。此外，您还要将多个字符串文字附加在一起，这是多余的。试试这个：

function drawRow(obj) { // note the amended parameter name
    var $row = $("<tr>")
    $(".step1table").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>'));
}

Working example

表UI未正确设置

2 个答案: