CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
TechGuy
TechGuy

Reputation: 4570

Table UI not set properly

I have a bootstrap table, table headers and table rows dynamically created using a javascript function. The issue is that the dynamically created rows looks very ugly:

enter image description here

<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>"));
}

All the dynamically created rows are compacted together. How can I solve that?

Upvotes: 0

Views: 25

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337713

Firstly the parameter your provide to the function is called JobjectArray, yet you're trying to retrieve the properties from obj. Secondly, the table element doesn't have the step1table class on it - you need to add it. Also you're appending multiple string literals together which is redundant. Try this:

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

Upvotes: 1

Jai
Jai

Reputation: 74738

I feel you have to append the row after all tds are appended to row and you have to use a proper selector which is $(".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 is the div element which holds your table HTMLElement.

Upvotes: 1

Related Questions