CODEWITHSUNDEEP
javascripthtml
Craig
Craig

Reputation: 18734

Populate <Table> rows with HTML

I have a blank table on a screen:

<table id="TransactionTable" class="table table-responsive table-striped">
    <thead>
        <tr>
            <th></th>
            <th>Date</th>
            <th>Account</th>
            <th>Third Party</th>
            <th class="text-right">Amount</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

In my controller, I build up some HTML rows for this table, using text:

foreach(var i in transactions) {
    tblCode += "<tr>";
    tblCode += string.Format(
        "<td><a href=\"@Url.Action(\"EditTransaction\", \"Transaction\" class=\"btn btn-sm btn-success\" title=\"View Transaction\">View</a></td>");
    tblCode += string.Format("<td class=\"small-bold-cell\">{0}</td>", i.Date.ToString("dd.MMM.yyyy"));
    tblCode += string.Format("<td class=\"small-cell\">{0}</td>", i.EntityEventTypeId == (int) Constants.EntityEventTypes.Payment ? i.DestinationEntityFull : i.SourceEntityFull);
    tblCode += string.Format("<td class=\"small-cell\">{0}</td>", i.EntityEventTypeId == (int) Constants.EntityEventTypes.Payment ? i.SourceEntityFull : i.DestinationEntityFull);
    tblCode += string.Format("<td class=\"small-bold-cell text-right\">{0}</td>", i.Amount.ToString("C2"));

    tblCode += "</tr>";

}

I then pass this back to my javascript in a JSON Result, and using Chrome, I can see the HTML code in the returned object.

I then attempt to add that HTML code to my table.

if (result.Success == 'true') {
    $.unblockUI();
    $('#TransactionTable').innerHTML = result.TableCode;
    $('#transactions').modal('show');

}
else {
    $.unblockUI();
    alert("error");
}

But it doesn't seem to add the code at all. The table has nothing in it once displayed.

What am I doing incorrectly?

Upvotes: 0

Views: 45

Answers (1)

tymeJV
tymeJV

Reputation: 104795

jQuery objects dont have an innerHTML property - you need to either use the html method, or reference the 0 index of the jQ object to get the native DOM object:

$('#TransactionTable')[0].innerHTML = result.TableCode;

Or

$('#TransactionTable').html(result.TableCode);

Upvotes: 2

Related Questions