DEV'S

JQuery Document Ready - Placement Of Script Tag

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link href="mystyle.css" rel="stylesheet" />

    </head>
    <body>
        <div class="container">
            <header class="headerbar top"><h1>Registration</h1></header>
            <aside class="leftbar">
                <div>
                    <fieldset>
                        <label for="firstname"><span>First Name</span></label>
                        <input type="text" placeholder="enter first name" id="firstname">
                    </fieldset>
                    <fieldset>
                        <label for="lastname">Last Name</label>
                        <input type="text" placeholder="enter last name" id="lastname">
                    </fieldset>
                    <fieldset>
                        <label for="rollnum">Roll Number</label>
                        <input type="text" placeholder="enter Roll number" id="rollnum">
                    </fieldset>
                    <fieldset>
                        <label for="subject">Subject</label>
                        <select id="subject">
                            <option value="Math">Math</option>
                            <option value="Physics">Physics</option>
                            <option value="Chemistry">Chemistry</option>
                            <option value="English">English</option>
                            <option value="Tamil">Tamil</option>
                        </select>
                    </fieldset>
                    <fieldset>
                        <label for="submit"> </label>
                        <button id="submit">Register</button>
                        <button id="clear">Clear</button>
                        <button id="addfirst">Add@First</button>
                        <button id="removelast">RemoveLast</button>
                        <button id="removefirst">RemoveFirst</button>
                    </fieldset>
                </div>
            </aside>
            <aside class="rightbar">

                <table id="regtable">
                    <thead>
                        <tr>
                            <th>First Name</th>
                            <!—                           <th>Last Name</th>—>
                            <th>Roll Number</th>
                            <th>Subject</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="tablerows">

                    </tbody>
                </table>

            </aside>
            <footer class="headerbar bottom"></footer>
        </div>
        <script src="jquery-2.1.3.min.js"></script>
        <script>
            var studentsArray = [];
            var selectedIndex = -1;

            function adjustLayout() {
                //console.log("My function called");
                var w = $(window).width();
                var h = $(window).height();
                console.log("Width : " + w + " px, Height: " + h + " px");
                $(".container").width(w);
                $(".headerbar").width($(".container").width());
                if (w > 900) {
                    $(".leftbar").css({"width": $(".container").width() / 2, "min-height": 600});
                    $(".rightbar").css({"width": ($(".container").width() / 2) - 20, "padding": 10, "min-height": 580});
                } else {
                    $(".leftbar").css({"width": $(".container").width(), "min-height": 200});
                    $(".rightbar").css({"width": ($(".container").width()) - 20, "padding": 10, "min-height": 220});
                    //$(".rightbar").removeAttr("margin-top");
                }
                //$(":button")
                $("fieldset").width($(".leftbar").width() - 30);
                $("input").width($(".leftbar").width() - 50);
                $("select").width($(".leftbar").width() - 40);
                //$(".container").css({width:w});
                //$(".headerbar").css({width:$(".container").width(),height:200});
            }

            $(document).ready(function () {
                init();
                adjustLayout();
                $("#submit").on("click", function () {
                    onRegisterPressed();
                });

                $("#clear").click(function () {
                    onClarPressed();
                });

                $("#addfirst").click(function () {
                    var firstName = $("#firstname").val();
                    var lastName = $("#lastname").val();
                    var rollNum = $("#rollnum").val();
                    var subject = $("#subject").val();
                    var stuObj = {firstname: firstName, lastname: lastName, rollnum: rollNum, subject: subject};
                   
                    studentsArray.unshift(stuObj);
                    

                    localStorage.studentsRecord = JSON.stringify(studentsArray);
                    init();
                });

                $("#removefirst").click(function () {

                    studentsArray.shift();
                    localStorage.studentsRecord = JSON.stringify(studentsArray);
                    init();
                });

                $("#removelast").click(function () {
                    studentsArray.pop();
                    localStorage.studentsRecord = JSON.stringify(studentsArray);
                    init();
                });

            });

            $(window).resize(function () {
                adjustLayout();
            });

            function init() {

                $("#tablerows").empty();
                if (localStorage.studentsRecord) {
                    studentsArray = JSON.parse(localStorage.studentsRecord);
                    for (var i in studentsArray) {
                        $("#tablerows").append("<tr>");

                        for (var key in studentsArray[i]) {
                            if (key !== "lastname") {
                                $("#tablerows").append("<td>" + studentsArray[i][key] + "</td>");
                            }

                        }
                        $("#tablerows").append("<td><button onclick=\"onEditPressed(" + i + ")\">Edit</button><br/><button onclick=\"deleteTableRow(" + i + ")\">Delete</button></td>");
                        $("#tablerows").append("</tr>");
                    }
                }

                onClarPressed();
            }

            function onRegisterPressed() {

                var firstName = $("#firstname").val();
                var lastName = $("#lastname").val();
                var rollNum = $("#rollnum").val();
                var subject = $("#subject").val();
                var stuObj = {firstname: firstName, lastname: lastName, rollnum: rollNum, subject: subject};
                if (selectedIndex === -1) {
                    studentsArray.push(stuObj);
                } else {
                    studentsArray.splice(selectedIndex, 1, stuObj);
                }

                localStorage.studentsRecord = JSON.stringify(studentsArray);
                init();

            }

            function deleteTableRow(index) {

                studentsArray.splice(index, 1);
                localStorage.studentsRecord = JSON.stringify(studentsArray);
                init();
            }

            function onClarPressed() {
                selectedIndex = -1;
                $("#firstname").val("");
                $("#lastname").val("");
                $("#rollnum").val("");
                $("#subject").val("Math");
                $("#submit").html("Register");

            }

            function onEditPressed(index) {
                selectedIndex = index;
                var stuObj = studentsArray[index];
                $("#firstname").val(stuObj.firstname);
                $("#lastname").val(stuObj.lastname);
                $("#rollnum").val(stuObj.rollnum);
                $("#subject").val(stuObj.subject);
                $("#submit").html("Update");

            }

        </script>
    </body>

</html>

HTML5

2018-11-27 21:35:02
1) Ionic - Angular Videos
2018-06-29 05:46:32
2) Service - Broadcast Receiver
2018-06-28 03:55:43
3) Activity - Bundle - Option Menu - ActionBar
2018-06-27 03:27:57
4) Relative Layout
2018-06-25 03:14:55
5) LinearLayout Calc
2018-02-08 05:14:15
6) PHP HelloWorld
2018-01-19 04:57:25
7) Angular 5 - Material Design - Reactive Form - Continued
2018-01-19 04:06:05
8) Feedback
2018-01-19 02:07:18
9) Angular 5 - Material Design
2018-01-18 03:05:47
10) Angular 5 - Custom Directives,Pipes - Promise And Observables
2018-01-17 22:51:45
11) Angular 5 - Component Interaction
2018-01-17 03:14:26
12) Angular 5 - Registration Form - WebService
2018-01-17 01:46:34
13) Angular 5 - Directives
2018-01-16 23:13:47
14) Angular 5 - Lifecycle Hooks - Routing
2018-01-16 21:36:25
15) CRUD Example - TS - LocalStorage - Delete
2018-01-16 13:34:40
16) Shopping App - Api Calls - JSON
2018-01-16 03:17:09
17) CRUD Example - TS - LocalStorage - View - Add
2018-01-15 23:57:32
18) TypeScript - Part 2
2018-01-15 23:02:07
19) TypeScript - Part 1
2018-01-15 04:46:29
20) TypeScript To JavaScript
2018-01-15 00:48:22
21) First Angular5 App
2016-01-17 23:47:13
22) JQuery Mobile - My Account Page Addon
2016-01-16 02:38:09
23) HTML5 - CSS - JavaScript Exam Preparation
2016-01-14 02:34:08
24) JQuery Validation Plugin - Basics
2016-01-13 02:35:46
25) Final - JQuery Mobile - IndexedDB Addon
2016-01-12 03:23:20
26) JQuery Mobile - IndexedDB Addon
2016-01-11 00:08:42
27) Students Record - JQuery Mobile App
2016-01-09 04:03:04
28) JQuery Mobile PageChange Event
2016-01-08 03:51:55
29) Beginning JQuery Mobile
2016-01-07 03:47:24
30) WebWorker Example
2016-01-06 04:11:18
31) IndexedDB - ObjectStore - Tansaction - Cursor - Part 2
2016-01-05 03:46:35
32) Student Record - IndexedDB Migration
2016-01-04 23:47:55
33) IndexedDB - ObjectStore - Tansaction - Cursor
2016-01-04 04:48:33
34) Single Page Design And Geolocation Example With Ajax
2016-01-03 23:39:19
35) Drag And Drop Example
2016-01-03 01:57:50
36) Beginning Responsive WebDesign Using JQuery
2016-01-03 01:56:17
37) HTML5 Canvas Simple Example
2016-01-03 01:55:11
38) JQuery Object - Context - Function Callbacks
2015-12-29 23:28:49
39) JQuery DOM Manipulation And LocalStorage
2015-11-30 23:50:59
40) JavaScript EventListeners
2015-11-30 04:34:08
41) MultiPage Design
2015-11-28 03:02:52
42) HTML Box Design
2015-07-03 03:09:55
43) KO Custom Component
2015-07-02 23:25:36
44) KO Custom Binding And Template Binding
2015-07-01 23:27:04
45) KO Simplelist
2015-07-01 01:44:40
46) KO Introduction And JQuery Simple List
2015-01-29 00:34:17
47) Canvas - DragDrop - Video - Audio Example
2015-01-28 03:57:05
48) CSS Media Type - IndexedDB WHERE And LIKE Clause
2015-01-27 02:24:12
49) IndexedDB Simple Example
2015-01-24 00:11:32
50) Students Record - JQueryMobile - GeoLocation - Ajax Addon
2015-01-24 00:08:19
51) GeoLocation And Ajax Example
2015-01-21 05:23:32
52) Students Record - JQueryMobile - SessionStorage - Login State
2015-01-19 23:33:29
53) JQueryMobile - Page Change - Popup Addon
2015-01-19 00:21:28
54) JQueryMobile - Data-Role Introduction
2015-01-17 03:22:07
55) Handle PageLinks
2015-01-16 04:28:20
56) Simple HTML5 Calculator
2015-01-16 03:03:45
57) Load External DOM - Ajax In Simple Way
2015-01-16 03:01:48
58) JQuery Document Ready - Placement Of Script Tag
2015-01-13 22:54:25
59) Dynamic Layout Technique Using JQuery
2015-01-13 04:04:19
60) JQuery - Introduction
2015-01-12 23:45:02
61) LocalStorage - CRUD
2015-01-12 00:06:03
62) JSON - LocalStorage Example
2015-01-11 22:47:24
63) JavaScript - Data Persistency Using LocalStorage - SessionStorage
2015-01-10 03:17:01
64) HTML - JavaScript - Dynamic Table
2015-01-10 00:32:26
65) JavaScript Introduction
2015-01-09 04:07:47
66) CSS - Continued
2015-01-08 03:26:39
67) CSS - Margin - Padding - HTML5 Semantic Elements
2015-01-07 22:44:01
68) HTML-CSS Introduction
2014-11-25 14:27:00
69) Angular JS Simple Example
2014-10-16 05:01:39
70) CSS Media Example - Different CSS For Desktop - Tablet - Phone Screen Sizes
2014-10-15 04:20:11
71) Miscellaneous In Addition To Previous Exercises
2014-10-15 04:13:45
72) Some Useful RegEx
2014-10-14 02:57:45
73) Shopping List App Using IndexedDB
2014-10-14 00:04:10
74) IndexedDB Introduction
2014-10-14 00:00:01
75) JavaScript Prototyping
2014-10-11 03:50:47
76) Introduction To Canvas Drawing - Tabs - Popup Warning Dialog
2014-10-11 00:03:50
77) Popup - Validation - Shopping List App Updated
2014-10-10 22:34:42
78) RegEx Pattern For Validation - Shopping List App
2014-10-10 05:12:13
79) Password Lock-Shopping List App
2014-10-09 22:49:34
80) JQuery Shopping - Updated
2014-10-09 05:10:00
81) JQuery Mobile Forms - Save Checkbox - Radio Button Checked States
2014-10-08 22:18:40
82) JQuery Mobile Forms - Additional Data-role Attribute Values
2014-10-08 02:17:48
83) JQuery Shopping List Alternate Approach. JQ Append & Pagechange
2014-10-07 03:02:43
84) JQuery Mobile Page Change Events
2014-10-06 02:19:53
85) JQuery Mobile Data- Attribute Reference
2014-10-06 00:13:01
86) Shopping List Using LocalStorage
2014-10-06 00:10:02
87) JQuery Mobile Introduction
2014-10-06 00:07:40
88) JQuery Page Loading Technique
2014-10-06 00:05:39
89) Mobile Ready Page Extended - Load Multiple Pages Using JQuery
2014-10-06 00:00:27
90) A Mobile First Design Using JQuery - Window-Size
2014-10-05 23:58:01
91) JavaScript Array - Create - Update - Delete
2014-10-05 23:55:43
92) JQuery CSS Capabilities - A Mobile Ready Page
2014-10-05 23:52:42
93) JQuery Introduction - Unit Conversion Using JQuery
2014-10-05 23:49:58
94) JavaScript - DOM Manipulation-Table-Calculator
2014-10-05 23:40:06
95) GeoLocation
2014-10-05 23:37:36
96) Margin And Border Radius
2014-10-05 23:34:06
97) HTML5 Semantic Elements, CSS,SVG Examples
2014-10-05 23:28:45
98) HTML,CSS Selectors

© Vasudev.H / Email: tech3in@live.com