hello world
hello world

Reputation: 1755

Object property into table jQuery

I have the following table here

    <table>
        <thead>
            <tr>
                <th>Loan Type</th>
                <th>Amount Borrowed</th>
                <th>Current Payment</th>
                <th>Current Term</th>
                <th>Total Cost of Loan</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

and I have a object which has the following properties
Object {balance: 10000, monthlyPayment: 98.41810662028588, total: 11810.172794434306} (all copied from Chrome console)

How would I do something like this <td>object.balance</td> I just need the single value of a property. I've tried the following $(object.balance)appendTo('tr') but nothing seems to be working.

Upvotes: 1

Views: 66

Answers (4)

hkutluay
hkutluay

Reputation: 6944

Use this for add balance to all td elements

$('td').html(object.balance);

To first td

$('td').first().html(object.balance);

Upvotes: 1

Ankit Kumar Gupta
Ankit Kumar Gupta

Reputation: 1322

You need to create dynically td also.I am creating td dynically acc to number of field in the object.I wrote the code in fsfiddle.Link is given below:-

var obj =  {balance: 10000, monthlyPayment: 98.41810662028588, total: 11810.172794434306}

for (var i in obj) {
   var tdtag = document.createElement('td')
   tdtag.innerHTML = obj[i]
   var rowid = document.getElementById('rowId')
    rowid.appendChild(tdtag)
}

Upvotes: 0

Braeden Dillon
Braeden Dillon

Reputation: 99

What this will do is select the 'td' item you specify in specfic_tr_number and set it's value to the object's value specified. Goodluck.

<table>
    <thead>
        <tr>
            <th>Loan Type</th>
            <th>Amount Borrowed</th>
            <th>Current Payment</th>
            <th>Current Term</th>
            <th>Total Cost of Loan</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
<script>
    var myObject = {balance: 10000, monthlyPayment: 98.41810662028588, total: 11810.172794434306};
    $('tbody tr').find('td:nth-child(specfic_tr_number)').html(myObject.balance);
</script>

Upvotes: 0

Moose
Moose

Reputation: 1317

Several ways to do this. Looks like you are using jQuery.

<table>
        <thead>
            <tr>
                <th>Loan Type</th>
                <th>Amount Borrowed</th>
                <th>Current Payment</th>
                <th>Current Term</th>
                <th>Total Cost of Loan</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td id="balancethingy">asdf</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>



<script>
    var myObject = {balance: 10000, monthlyPayment: 98.41810662028588, total: 11810.172794434306};
    $('#balancethingy').text = myObject.balance ;
</script>

Upvotes: 0

Related Questions