Access Div tag inside TD with jQuery

Question

I have a table with the following structure.

 <table id="items">
     <tbody>
        <tr>
            <th>SlNo</th>
            <th>Item</th>
            <th>Unit Cost</th>
            <th>Quantity</th>
            <th>Price</th>
        </tr>
        <tr class="item-row">
            <td class="item-name">
            <div class="delete-wpr"><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
            <td><input type="text" class="slno"/></td>           
            <td><input type="text" class="cost"/></td>
            <td><input type="text" class="qty"/></td>
            <!--  <td><span class="price"></span></td>-->
            <td class="price"> </td>
        </tr>
        <input type="button" id="example" value="submit" onClick="storeAndShowTableValues()"/>
    </tbody>
    <tr>
        <td colspan="2" class="blank"> </td>
        <td colspan="2" class="total-line">Subtotal</td>
        <td class="total-value"><div id="subtotal">$875.00</div></td>
    </tr>
    <tr>
        <td colspan="2" class="blank"> </td>
        <td colspan="2" class="total-line">Total</td>
        <td class="total-value"><div id="total">$875.00</div></td>
    </tr>
    <tr>
        <td colspan="2" class="blank"> </td>
        <td colspan="2" class="total-line">Amount Paid</td>
        <td class="total-value"><textarea id="paid">$0.00</textarea></td>
    </tr>
    <tr>
        <td colspan="2" class="blank"> </td>
        <td colspan="2" class="total-line balance">Balance Due</td>
        <td class="total-value balance"><div class="due">$875.00</div></td>
    </tr>
</table>

with jQuery, I want to select the contents of div Ids, subtotal,total,amount paid and balance due.

There is this button i use to trigger the jQuery

<input type="button" id="example" value="submit" onClick="storeAndShowTableValues()"/>

I already tried to do it like this, but it's not working.

var qwer=$("#example").closest("tr").find(".subtotal");

How do i do this?

Answer 1

var subtotal = $('#subtotal').text(),
    total = $('#total').text(),
    paid = $('#paid').val(),
    due = $('.due').text();

For Something like this?

 $(document).on('click', '#example', function(e) { var subtotal = parseFloat($('#subtotal').text().replace(/[^0-9.]/g, '')), total = parseFloat($('#total').text().replace(/[^0-9.]/g, '')), paid = parseFloat($('#paid').val().replace(/[^0-9.]/g, '')), due = parseFloat($('.due').text().replace(/[^0-9.]/g, '')); $('ul').empty(); var all = { subtotal: subtotal, total: total, paid: paid, due: due } for (x in all) { var ax = all[x]; $('ul').append($('<li />', { text: x + ': ' + ax })) } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table id="items"> <tbody> <tr> <th>SlNo</th> <th>Item</th> <th>Unit Cost</th> <th>Quantity</th> <th>Price</th> </tr> <tr class="item-row"> <td class="item-name"> <div class="delete-wpr"><a class="delete" href="javascript:;" title="Remove row">X</a></div></td> <td><input type="text" class="slno"/></td> <td><input type="text" class="cost"/></td> <td><input type="text" class="qty"/></td> <!-- <td><span class="price"></span></td>--> <td class="price"> </td> </tr> <input type="button" id="example" value="submit" /> </tbody> <tr> <td colspan="2" class="blank"> </td> <td colspan="2" class="total-line">Subtotal</td> <td class="total-value"><div id="subtotal">$875.00</div></td> </tr> <tr> <td colspan="2" class="blank"> </td> <td colspan="2" class="total-line">Total</td> <td class="total-value"><div id="total">$900.00</div></td> </tr> <tr> <td colspan="2" class="blank"> </td> <td colspan="2" class="total-line">Amount Paid</td> <td class="total-value"><textarea id="paid">$0.00</textarea></td> </tr> <tr> <td colspan="2" class="blank"> </td> <td colspan="2" class="total-line balance">Balance Due</td> <td class="total-value balance"><div class="due">$420.00</div></td> </tr> </table> <ul></ul> 

Or how about this?!

function getValues() {
    var cost = parseFloat($('.cost').val().replace(/[^0-9.]/g, '')),
        qty = parseFloat($('.qty').val().replace(/[^0-9.]/g, ''));
    return {
        cost: cost == cost ? cost : 0,
        qty: qty == qty ? qty : 1,
        subtotal: parseFloat($('#subtotal').text().replace(/[^0-9.]/g, '')),
        total: parseFloat($('#total').text().replace(/[^0-9.]/g, '')),
        paid: parseFloat($('#paid').val().replace(/[^0-9.]/g, '')),
        due: parseFloat($('.due').text().replace(/[^0-9.]/g, ''))
    }
}

 function getValues() { var cost = parseFloat($('.cost').val().replace(/[^0-9.]/g, '')), qty = parseFloat($('.qty').val().replace(/[^0-9.]/g, '')), subt = parseFloat($('#subtotal').text().replace(/[^0-9.]/g, '')); if (this.subt == undefined) this.subt = subt return { cost: cost == cost ? cost : 0, qty: qty == qty ? qty : 1, subtotal: cost && qty ? subt : this.subt, total: parseFloat($('#total').text().replace(/[^0-9.]/g, '')), paid: parseFloat($('#paid').val().replace(/[^0-9.]/g, '')), due: parseFloat($('.due').text().replace(/[^0-9.]/g, '')) } } function calc() { var v = getValues(), newSub = (v.cost * v.qty) + v.subtotal, newTot = newSub, newDue = newTot - v.paid; console.log(v, '\\r\\n', '(',v.cost,' * ',v.qty,')', '+', v.subtotal, (v.cost * v.qty) + v.subtotal) $('#subtotal').text('$' + newSub); $('#total').text('$' + newTot); $('.due').text('$' + newDue); } calc(); $(document) .on('change', '.cost, .qty, #paid', calc) .on('click', '#example', calc) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table id="items"> <tbody> <tr> <th>SlNo</th> <th>Item</th> <th>Unit Cost</th> <th>Quantity</th> <th>Price</th> </tr> <tr class="item-row"> <td class="item-name"> <div class="delete-wpr"><a class="delete" href="javascript:;" title="Remove row">X</a></div></td> <td><input type="text" class="slno"/></td> <td><input type="text" class="cost"/></td> <td><input type="text" class="qty"/></td> <!-- <td><span class="price"></span></td>--> <td class="price"> </td> </tr> <input type="button" id="example" value="submit" /> </tbody> <tr> <td colspan="2" class="blank"> </td> <td colspan="2" class="total-line">Subtotal</td> <td class="total-value"><div id="subtotal">$875.00</div></td> </tr> <tr> <td colspan="2" class="blank"> </td> <td colspan="2" class="total-line">Total</td> <td class="total-value"><div id="total">$875.00</div></td> </tr> <tr> <td colspan="2" class="blank"> </td> <td colspan="2" class="total-line">Amount Paid</td> <td class="total-value"><textarea id="paid">$0.00</textarea></td> </tr> <tr> <td colspan="2" class="blank"> </td> <td colspan="2" class="total-line balance">Balance Due</td> <td class="total-value balance"><div class="due">$875.00</div></td> </tr> </table> <ul></ul>