Introduction

Background: In order to Understand the code u need to first know some basics:

Introduction of Jquery

Html: Using the code

In order to use this code U should have some idea of MVC.

I m sharing View code and Css to Add and Edit items in a HTML table with Popup dialog.

Hide Copy Code
  1. //View Code  
  2. <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />  
  3. <script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>  
  4. <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js" type="text/javascript"></script>  
  5. <link href="../Content/popup.css" rel="stylesheet" />  
  6. <style>  
  7. #tbl1 {  
  8. width: 80%;  
  9. text-align: center;  
  10. }  
  11. #tbl1 td {  
  12. width: 200px;  
  13. }  
  14. </style>  
  15. <table id="tbl1">  
  16.     <tr>  
  17.         <td>PO Number</td>  
  18.         <td>@Html.TextBox("POrderNumber", (string)ViewBag.Title)</td>  
  19.         <td>Select Date</td>  
  20.         <td>  
  21.             <input type="text" id="datepicker" style="width:150px" />  
  22.         </td>  
  23.     </tr>  
  24.     <tr>  
  25.         <td>Select Vendor</td>  
  26.         <td >  
  27. @Html.DropDownList("lstVendor", ViewBag.lstVendor as IEnumerable  
  28.             <SelectListItem>, "Select Vendor")  
  29.             </td>  
  30.         </tr>  
  31.     </table>  
  32.     <div id="dialog-form" title="Add New Item">  
  33.         <p class="validateTips">  
  34. All form fields are required.  
  35. </p>  
  36.         <form>  
  37.             <fieldset>  
  38.                 <label for="productname">  
  39. Product Name  
  40. </label>  
  41.                 <input type="text" name="productname" id="product-name" value="" class="text ui-widget-content ui-corner-all" />  
  42.                 <label for="Productdesc">  
  43. Product Desc  
  44. </label>  
  45.                 <input type="text" name="Productdesc" id="Product-Desc" value="" class="text ui-widget-content ui-corner-all" />  
  46.                 <label for="Price">  
  47. Price  
  48. </label>  
  49.                 <input type="text" name="Price" id="Price" value="" class="text ui-widget-content ui-corner-all" />  
  50.                 <label for="Discount">  
  51. Discount  
  52. </label>  
  53.                 <input type="text" name="Discount" id="Discount" value="" class="text ui-widget-content ui-corner-all" />  
  54.             </fieldset>  
  55.         </form>  
  56.     </div>  
  57.     <div id="users-contain" class="ui-widget" style="width:auto">  
  58.         <h1>List Of Items:</h1>  
  59.         <table id="tblProducts" class="ui-widget ui-widget-content" style="width:auto">  
  60.             <thead>  
  61.                 <tr class="ui-widget-header ">  
  62.                     <th style="display:none;">ProductID</th>  
  63.                     <th>Product Name</th>  
  64.                     <th>Product Desc</th>  
  65.                     <th>Price</th>  
  66.                     <th>Discount</th>  
  67.                     <th>Final Price</th>  
  68.                     <th colspan="2">Actions</th>  
  69.                 </tr>  
  70.             </thead>  
  71.             <tbody></tbody>  
  72.             <tfoot>  
  73.                 <tr>  
  74.                     <td colspan="4" style="text-align:right">Grand Total : </td>  
  75.                     <td>  
  76.                         <label id="lbltotal"></label>  
  77.                     </td>  
  78.                 </tr>  
  79.             </tfoot>  
  80.         </table>  
  81.     </div>  
  82.     <button id="Add-Product">  
  83. Add New Item  
  84. </button>  
  85.     <script>  
  86. $(function () {  
  87. var editrow;  
  88. function checkrows() {  
  89. var rowcount = $("#tblProducts tbody tr").length;  
  90. if (rowcount == 0) {  
  91. $("#tblProducts tfoot tr").hide();  
  92. }  
  93. }  
  94. $("#datepicker").datepicker({ dateFormat: 'dd-mm-yy' });  
  95. var new_dialog = function (type, row)  
  96. {  
  97. var dlg = $("#dialog-form").clone();  
  98. var pname = dlg.find(("#product-name")),  
  99. pdesc = dlg.find(("#Product-Desc")),  
  100. price = dlg.find(("#Price")),  
  101. discount = dlg.find(("#Discount"));  
  102. typetype = type || 'Create';  
  103. title = "Add Item";  
  104. var config =  
  105. {  
  106. autoOpen: true,  
  107. height: 400,  
  108. width: 350,  
  109. modal: true,  
  110. buttons:  
  111. {  
  112. "Save": save_data,  
  113. "Cancel": function ()  
  114. {  
  115. dlg.dialog("close");  
  116. }  
  117. },  
  118. close: function ()  
  119. {  
  120. dlg.remove();  
  121. }  
  122. };  
  123. if (type === 'Edit')  
  124. {  
  125. config.title = "Edit Item";  
  126. get_data();  
  127. config.buttons['Save'] = function ()  
  128. {  
  129. var fprice = 0;  
  130. //var disc = discount.val() / 100;  
  131. if (discount.val() > 0) {  
  132. fprice = price.val() - (price.val() * (discount.val() / 100));  
  133. }  
  134. else {  
  135. fprice = price.val();  
  136. }  
  137. //row.remove();  
  138. var new_row = "  
  139.         <tr>" + "  
  140.             <td>" + pname.val() + "</td>" + "  
  141.             <td>" + pdesc.val() + "</td>" + "  
  142.             <td>" + price.val() + "</td>" + "  
  143.             <td>" + discount.val() + "</td>" + "  
  144.             <td>" + fprice + "</td>" + "  
  145.             <td>  
  146.                 <a href='' class='edit'>Edit</a>  
  147.             </td>" + "  
  148.             <td>  
  149.                 <span class='delete'>  
  150.                     <a href=''>Delete</a>  
  151.                 </span>  
  152.             </td>" + "  
  153.         </tr>";  
  154. editrow.replaceWith(new_row);  
  155. //row.replaceWith(new_row);  
  156. dlg.dialog("close");  
  157. findTotal();  
  158. //save_data();  
  159. };  
  160. }  
  161. dlg.dialog(config);  
  162. function get_data() {  
  163. var _pname = $(row.children().get(0)).text(),_pdesc = $(row.children().get(1)).text()  
  164. _price = $(row.children().get(2)).text(), _discount = $(row.children().get(3)).text();  
  165. //_fprice=$(row.children().get(4)).text();  
  166. pname.val(_pname);  
  167. pdesc.val(_pdesc);  
  168. price.val(_price);  
  169. discount.val(_discount);  
  170. }  
  171. function save_data() {  
  172. var fprice=0;  
  173. //var disc = discount.val() / 100;  
  174. if (discount.val() > 0)  
  175. {  
  176. fprice = price.val()-(price.val() * (discount.val() / 100));  
  177. }  
  178. else {  
  179. fprice = price.val();  
  180. }  
  181. $("#tblProducts tbody").append("  
  182.         <tr>" + "  
  183.             <td>" + pname.val() + "</td>" + "  
  184.             <td>" + pdesc.val() + "</td>" + "  
  185.             <td>" + price.val() + "</td>" + "  
  186.             <td>" + discount.val() + "</td>" + "  
  187.             <td>" + fprice + "</td>" + "  
  188.             <td>  
  189.                 <a href='' class='edit'>Edit</a>  
  190.             </td>" + "  
  191.             <td>  
  192.                 <span class='delete'>  
  193.                     <a href=''>Delete</a>  
  194.                 </span>  
  195.             </td>" + "  
  196.         </tr>");  
  197. dlg.dialog("close");  
  198. findTotal();  
  199. }  
  200. };  
  201. checkrows();  
  202. var row_total=0;  
  203. function findTotal() {  
  204. row_total = 0;  
  205. $("#tblProducts tbody tr").each(function () {  
  206. row_total += Number($(this).find("td:eq(4)").html());  
  207. });  
  208. $("#lbltotal").html(row_total);  
  209. $("#tblProducts tfoot tr").show();   
  210. //alert(row_total);  
  211. }  
  212. $(document).on('click', 'span.delete', function ()  
  213. {  
  214. $(this).closest('tr').find('td').fadeOut(1000,  
  215. function ()  
  216. {  
  217. // alert($(this).text());  
  218. $(this).parents('tr:first').remove();  
  219. findTotal();  
  220. checkrows();  
  221. });  
  222. return false;  
  223. });  
  224. $(document).on('click', 'td a.edit', function () {  
  225. new_dialog('Edit', $(this).parents('tr'));  
  226. editrow = $(this).parents('tr');  
  227. return false;  
  228. });  
  229. $("#Add-Product").button().click(new_dialog);  
  230. });  
  231.     </script>  
  232. //Css  
  233. body {  
  234. font-size: 62.5%;  
  235. }  
  236. label, input {  
  237. display: block;  
  238. }  
  239. input.text {  
  240. margin-bottom: 12px;  
  241. width: 95%;  
  242. padding: .4em;  
  243. }  
  244. fieldset {  
  245. padding: 0;  
  246. border: 0;  
  247. margin-top: 25px;  
  248. }  
  249. h1 {  
  250. font-size: 1.2em;  
  251. margin: .6em 0;  
  252. }  
  253. div#users-contain {  
  254. width: 350px;  
  255. margin: 20px 0;  
  256. }  
  257. div#users-contain table {  
  258. margin: 1em 0;  
  259. border-collapse: collapse;  
  260. width: 100%;  
  261. }  
  262. div#users-contain table td, div#users-contain table th {  
  263. border: 1px solid #eee;  
  264. padding: .6em 10px;  
  265. text-align: left;  
  266. }  
  267. .ui-dialog .ui-state-error {  
  268. padding: .3em;  
  269. }  
  270. .validateTips {  
  271. border: 1px solid transparent;  
  272. padding: 0.3em;  
  273. }  
  274.   
  275. #dialog-form {  
  276. display: none;   
  277. }
Points of Interest

This blog will definitely help you to understand how on the fly calculations are performed.