Run ยป
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <title>Denomination</title> <!-- Favicon--> <script> $(document).ready(function() { $('.noteCount').change(function() { //alert("Content " +this.id); countId = this.id; denomination = countId.substring(1, countId.length); amountId = "t" + denomination; amountEle = document.getElementById(amountId); x = parseFloat(this.value) * parseFloat(denomination); amountEle.innerHTML = x; refreshTotal(); }); function refreshTotal() { sum = 0; $('.grand').each(function(index) { sum += parseFloat(this.innerHTML); }); grandTotal = document.getElementById("grandTotal"); grandTotal.innerHTML = sum; }; }); </script> <style> /*** Table Styles **/ .table-fill { background: white; border-radius: 3px; border-collapse: collapse; height: 320px; margin: auto; max-width: 600px; padding: 5px; width: 50%; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); animation: float 5s infinite; } th { color: #D5DDE5; background: #1b1e24; border-bottom: 4px solid #9ea7af; border-right: 1px solid #343a45; font-size: 20px; font-weight: 100; padding: 24px; text-align: left; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); vertical-align: middle; } th:first-child { border-top-left-radius: 3px; } th:last-child { border-top-right-radius: 3px; border-right: none; } tr { border-top: 1px solid #C1C3D1; border-bottom-: 1px solid #C1C3D1; color: #666B85; font-size: 16px; font-weight: normal; text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1); } tr:hover td { background: #4E5066; color: #FFFFFF; border-top: 1px solid #22262e; } tr:first-child { border-top: none; } tr:last-child { border-bottom: none; } tr:nth-child(odd) td { background: #EBEBEB; } tr:nth-child(odd):hover td { background: #4E5066; } tr:last-child td:first-child { border-bottom-left-radius: 3px; } tr:last-child td:last-child { border-bottom-right-radius: 3px; } td { background: #FFFFFF; padding: 10px; text-align: left; vertical-align: middle; font-weight: 300; font-size: 18px; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); border-right: 1px solid #C1C3D1; } td:last-child { border-right: 0px; } th.text-left { text-align: left; } th.text-center { text-align: center; } th.text-right { text-align: right; } td.text-left { text-align: left; } td.text-center { text-align: center; } td.text-right { text-align: right; } </style> </head> <form method="post" action="deposit_process.php"> <div class="table-title"> <h3 align="center">DEPOSIT TABLE</h3> </div> <div align="left"> <table class="table-fill"> <thead> <tr> <th class="text-left">NOTES</th> <th class="text-left">Count</th> <th class="text-left">Amount</th> </tr> </thead> <tbody class="table-hover"> <tr> <td class="text-left">2000X</td> <td><input type="text" class="noteCount" id="x2000" name="INR2000"></td> <td class="grand" id="t2000">0</td> </tr> <tr> <td class="text-left">500X</td> <td> <input type="text" class="noteCount" id="x500" name="INR500"></td> <td class="grand" id="t500">0</td> </tr> <tr> <td class="text-left">200X</td> <td><input type="text" class="noteCount" id="x200" name="INR200"></td> <td class="grand" id="t200">0</td> </tr> <tr> <td class="text-left">100X</td> <td><input type="text" class="noteCount" id="x100" name="INR100"></td> <td class="grand" id="t100">0</td> </tr> <tr> <td class="text-left">50X</td> <td><input type="text" class="noteCount" id="x50" name="INR50"></td> <td class="grand" id="t50">0</td> </tr> <tr> <td class="text-left">20X</td> <td><input type="text" class="noteCount" id="x20" name="INR20"></td> <td class="grand" id="t20">0</td> </tr> <tr> <td class="text-left">10X</td> <td><input type="text" class="noteCount" id="x10" name="INR10"></td> <td class="grand" id="t10">0</td> </tr> <tr> <td class="text-left">5X</td> <td><input type="text" class="noteCount" id="x5" name="INR5"></td> <td class="grand" id="t5">0</td> </tr> <tr> <td class="text-left">2X</td> <td><input type="text" class="noteCount" id="x2" name="INR2"></td> <td class="grand" id="t2">0</td> </tr> <tr> <td class="text-left">1X</td> <td><input type="text" class="noteCount" id="x1" name="INR1"></td> <td class="grand" id="t1">0</td> </tr> <tr> <td class="text-left">Total</td> <td class="text-left"></td> <td class="text-left" contenteditable="false" id="grandTotal" name="tatal">0</td> </tr> </tbody> </table> </div> <!--<input type="checkbox" id="remember_me" class="filled-in"> <label for="remember_me">Remember Me</label>--> <br> <p align="center"><button type="submit" name="save" class="btn btn-primary m-t-15 waves-effect">SUBMIT</button></p> <closeform></closeform></form> </body> </html>