How to update a td value from a table with id using jQuery

Question

I am trying to work out how to update the value of the table cell for each row using jQuery.

I basically update the td#11_p value from the table, but it's not updated. I tried following jQuery,

 $('#test').click(function() { var oldprirce = $("#11_p").val(); $("#11_p").val(+(oldprirce) + +(15)); jQuery("#PDList").trigger("liszt:updated"); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="pdsDetails" border=" 1px solid black" class="table table-bordered table-striped datatable dt-responsive nowrap" style="width: 100%; "> <thead> <tr> <th>Product Name</th> <th>Quantity</th> <th>Price</th> </tr> </thead> <tbody id="PDList"> <tr id="11_row"> <td>PARACHUTE HAIR OIL 50ml</td> <td id="11_q">1</td> <td id="11_p">20</td> </tr> <tr id="12_row"> <td>HAIR OIL 50ml</td> <td id="12_q">2</td> <td id="12_p">30</td> </tr> </tbody> </table> <button id="test">change</button>

https://jsfiddle.net/SathishNcc/1dusLhrv/16/

Answer 1

Only form control elements have a value property. td elements just have text or HTML content which can be read and updated.

Given your goal of wanting to add 15 to the current integer in the cell you can provide a function to text() which accepts the current content as a string argument, convert it to a float (as it's a price) and then add 15 to it before returning it to the function for it to update the DOM. Try this:

 $('#test').click(function() { $("#11_p").text((i, t) => parseFloat(t) + 15); jQuery("#PDList").trigger("liszt:updated"); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="pdsDetails" border=" 1px solid black" class="table table-bordered table-striped datatable dt-responsive nowrap" style="width: 100%; "> <thead> <tr> <th>Product Name</th> <th>Quantity</th> <th>Price</th> </tr> </thead> <tbody id="PDList"> <tr id="11_row"> <td>PARACHUTE HAIR OIL 50ml</td> <td id="11_q">1</td> <td id="11_p">20</td> </tr> <tr id="12_row"> <td>HAIR OIL 50ml</td> <td id="12_q">2</td> <td id="12_p">30</td> </tr> </tbody> </table> <button id="test">change</button>

Answer 2

You could change $("#11_q").val() ; to $("#11_q").html();