CRUD in JavaScript

Create, read, update and delete using only JavaScript.

by vaheed akhtar

HTML

<div id="container" style="width:700px;">
    </div>

CSS

table 
        {
            width: 100%;
            font: 17px Calibri;
        }
        table, th, td 
        {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
      
        input[type='button'] 
        {
            font: 15px Calibri;
            cursor: pointer;
            border: none;
            color: #FFF;
        }
        
        input[type='text'], select 
        {
            font: 17px Calibri;
            text-align: center;
            border: solid 1px #CCC;
            width: auto;
            padding: 2px 3px;
        }

JavaScript

var crudApp = new function () {

        // AN ARRAY OF JSON OBJECTS WITH VALUES.
        this.myBooks = [
            { ID: '1', Book_Name: 'Computer Architecture', Category: 'Computers', Price: 125.60 },
            { ID: '2', Book_Name: 'Asp.Net 4 Blue Book', Category: 'Programming', Price: 56.00 },
            { ID: '3', Book_Name: 'Popular Science', Category: 'Science', Price: 210.40 }
        ]

        this.category = ['Business', 'Computers', 'Programming', 'Science'];
        this.col = [];

        this.createTable = function () {

            // EXTRACT VALUE FOR TABLE HEADER.
            for (var i = 0; i < this.myBooks.length; i++) {
                for (var key in this.myBooks[i]) {
                    if (this.col.indexOf(key) === -1) {
                        this.col.push(key);
                    }
                }
            }

            // CREATE A TABLE.
            var table = document.createElement('table');
            table.setAttribute('id', 'booksTable');     // SET TABLE ID.

            var tr = table.insertRow(-1);               // CREATE A ROW (FOR HEADER).

            for (var h = 0; h < this.col.length; h++) {
                // ADD TABLE HEADER.
                var th = document.createElement('th');
                th.innerHTML = this.col[h].replace('_', ' ');
                tr.appendChild(th);
            }

            // ADD ROWS USING JSON DATA.
            for (var i = 0; i < this.myBooks.length; i++) {

                tr = table.insertRow(-1);           // CREATE A NEW ROW.

                for (var j = 0; j < this.col.length; j++) {
                    var tabCell = tr.insertCell(-1);
                    tabCell.innerHTML = this.myBooks[i][this.col[j]];
                }

                // DYNAMICALLY CREATE AND ADD ELEMENTS TO TABLE CELLS WITH EVENTS.

                this.td = document.createElement('td');

                // *** CANCEL OPTION.
                tr.appendChild(this.td);
                var...