jQuery to Update Invoice
<p>I am trying to create an dynamic invoice where I can add items and their prices from database. If I update either quantity or price of particular item, total of that row and grand total should change as per the calculations.</p>

<p>My HTML Code is :</p>

<pre><code>&lt;table width="98%" cellspacing="0" cellpadding="0" border="0" align="center" id="itemsTable"&gt;
                                        &lt;tbody&gt;&lt;tr&gt;
                                            &lt;td width="15%" height="33" align="left" class="bdr1"&gt;&lt;p class="txt1"&gt;Product Code&lt;/p&gt;&lt;/td&gt;
                                            &lt;td width="40%" height="33" align="left" class="bdr1"&gt;&lt;p class="txt1"&gt;Discription&lt;/p&gt;&lt;/td&gt;
                                            &lt;td width="10%" height="33" align="left" class="bdr1"&gt;&lt;p class="txt1"&gt;Quantity&lt;/p&gt;&lt;/td&gt;
                                            &lt;td width="20%" height="33" align="left" class="bdr1"&gt;&lt;p class="txt1"&gt;Price&lt;/p&gt;&lt;/td&gt;
                                            &lt;td width="20%" height="33" align="left" class="bdr1"&gt;&lt;p class="txt1"&gt;Total Price&lt;/p&gt;&lt;/td&gt;
                                            &lt;td width="15%" height="33" align="left" class="bdr2"&gt;&lt;p class="txt1"&gt;Remove&lt;/p&gt;&lt;/td&gt;
                                        &lt;/tr&gt;
                                                                                            &lt;tr&gt;
                                                    &lt;td align="left" style="padding-left: 5px;padding-bottom: 5px;padding-top: 5px;" class="bdr3"&gt;&lt;input type="text" tabindex="1" class="input-mini ui-autocomplete-input" name="product_code[]" autocomplete="off"&gt;&lt;span role="status" aria-live="polite" class="ui-helper-hidden-accessible"&gt;&lt;/span&gt;0001&lt;/td&gt;
                                                    &lt;td align="left" style="padding-left: 5px;padding-bottom: 5px;" class="bdr3"&gt;BUCKET BUSH (NEARLING)&lt;/td&gt;
                                                    &lt;td align="left" style="padding-left: 5px;padding-bottom: 5px;" class="bdr3"&gt;&lt;input type="text" size="5" id="itemQty" value="1" name="quantity[]"&gt;&lt;/td&gt;
                                                    &lt;td align="left" style="padding-left: 5px;padding-bottom: 5px;" class="bdr3"&gt;
                                                    &lt;input type="text" size="5" value="75" id="itemPrice" name="price[]"&gt;&lt;/td&gt;
                                                    &lt;td align="left" style="padding-left: 5px;padding-bottom: 5px;" class="bdr3"&gt;
                                                    &lt;input type="text" size="5" value="75" id="itemLineTotal" name="totalPrice[]"&gt;&lt;/td&gt;
                                                    &lt;td align="center" style="padding-left: 5px;padding-bottom: 5px;"&gt;&lt;a onclick="JavaScript:return DeleteConfirm('1');" href="JavaScript:void(0);"&gt;&lt;img width="22" height="22" border="0" src="images/remove_button.gif"&gt;&lt;/a&gt;&lt;/td&gt;
                                                &lt;/tr&gt;

                                                                                                    &lt;tr&gt;
                                                    &lt;td align="left" style="padding-left: 5px;padding-bottom: 5px;padding-top: 5px;" class="bdr3"&gt;&amp;nbsp;&lt;/td&gt;
                                                    &lt;td align="left" style="padding-left: 5px;padding-bottom: 5px;" class="bdr3"&gt;&amp;nbsp;&lt;/td&gt;
                                                    &lt;td align="center" style="padding-left: 5px;padding-bottom: 5px;" class="bdr3"&gt;&amp;nbsp;&lt;/td&gt;
                                                    &lt;td align="center" style="padding-left: 5px;padding-bottom: 5px;" class="bdr3"&gt;&amp;nbsp;&lt;/td&gt;
                                                    &lt;td align="center" style="padding-left: 5px;padding-bottom: 5px;" class="bdr3"&gt;&amp;nbsp;&lt;/td&gt;
                                                    &lt;td style="padding-left: 5px;padding-bottom: 5px;"&gt;&amp;nbsp;&lt;/td&gt;
                                                &lt;/tr&gt;
                                                &lt;tr&gt;
                                                    &lt;td align="left" style="padding-left: 5px;padding-bottom: 5px;padding-top: 5px;border-top:1px solid #BFBFBF;border-top:1px solid #BFBFBF;" class="bdr3"&gt;&amp;nbsp;&lt;/td&gt;
                                                    &lt;td align="left" style="padding-left: 5px;padding-bottom: 5px;border-top:1px solid #BFBFBF;" class="bdr3"&gt;&amp;nbsp;&lt;/td&gt;
                                                    &lt;td align="center" style="padding-left: 5px;padding-bottom: 5px;border-top:1px solid #BFBFBF;" class="bdr3"&gt;&amp;nbsp;&lt;/td&gt;
                                                    &lt;td align="center" style="padding-left: 5px;padding-bottom: 5px;border-top:1px solid #BFBFBF;" class="bdr3"&gt;&lt;b&gt;Grand Total : &lt;/b&gt;&lt;/td&gt;
                                                    &lt;td id="invGrandTotal" style="padding-left: 5px;padding-bottom: 5px;border-top:1px solid #BFBFBF;" class="bdr3"&gt;&lt;h4&gt;$0.00&lt;/h4&gt;&lt;/td&gt;
                                                    &lt;td align="center" style="padding-left: 5px;padding-bottom: 5px;border-top:1px solid #BFBFBF;"&gt;&amp;nbsp;&lt;/td&gt;
                                                &lt;/tr&gt;
                                            &lt;tr&gt;
                                                &lt;td align="right" style="padding-right: 25px;padding-top: 10px;border-top:1px solid #BFBFBF;" colspan="6"&gt;&lt;a onclick="JavaScript:return UpdateQty();" href="JavaScript:void(0);"&gt;&lt;img width="66" height="22" border="0" src="images/update_button.gif"&gt;&lt;/a&gt;&lt;/td&gt;
                                            &lt;/tr&gt;
                                            &lt;tr&gt;
                                                &lt;td valign="top" align="right" colspan="4"&gt;Clients : &lt;/td&gt;
                                                &lt;td align="left" style="padding-left: 5px;" colspan="2"&gt;
                                                     &lt;/td&gt;
                                            &lt;/tr&gt;
                                            &lt;tr&gt;
                                                &lt;td valign="top" align="right" style="padding-top: 5px;" colspan="4"&gt;New Clients&lt;/td&gt;
                                                &lt;td align="left" style="padding-left: 5px;padding-top: 5px;" colspan="2"&gt;
                                                    &lt;input type="text" value="" name="newclient"&gt;
                                                &lt;/td&gt;
                                            &lt;/tr&gt;
                                            &lt;tr&gt;
                                                &lt;td align="right" style="padding-top: 5px;" colspan="4"&gt;&lt;input type="button" onclick="JavaScript:SendQuotation();" name="send" value="Send"&gt;&lt;/td&gt;
                                                &lt;td align="left" style="padding-left: 15px;padding-top: 5px;" colspan="2"&gt;&lt;input type="button" onclick="JavaScript:window.print();" name="print" value="Print"&gt;&lt;/td&gt;
                                            &lt;/tr&gt;
                                                                                    &lt;/tbody&gt;&lt;/table&gt;
</code></pre>

<p>Could someone please help me how to do this with jQuery?</p>
