crud in js

by John Kiran

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="main">


<div >
  <center id="container"></center>
    <!-- This element's contents will be replaced with your component. -->
</div>
</div>

CSS

#main{
  text-align:center;
 
}

table {
 border-collapse: collapse;
  width:30%;
  text-align:center;
}

th,td {
  border:1px solid black;
  padding: 5px;
}

Babel + JSX

let divv = document.getElementById("container");
let col = [];
let myBooks = [
    { Id: '1', BookName: 'Embedded', Price: 125 },
    { Id: '2', BookName: 'Microbiology', Price: 56 },
    { Id: '3', BookName: 'Image processing', Price: 210 },
];

let createTable = function () {
    //column headers are stored in col
    for (let i = 0; i < myBooks.length; i++) {
        for (let key in myBooks[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }
    //creating table
    let table = document.createElement('table');
    let tr = table.insertRow(-1);
    //adding header row
    for (let i = 0; i < col.length; i++) {
        let th = document.createElement('th');
        th.innerHTML = col[i];
        tr.appendChild(th);
    }

    //creating new rows and adding json data
    for (let i = 0; i < myBooks.length; i++) {
        tr = table.insertRow(-1);
        for (let j = 0; j < col.length; j++) {
            let td = tr.insertCell(-1);
            td.innerHTML = myBooks[i][col[j]];
        }
        
        //creating new cell
        let tdNew = document.createElement("td");
        //tdNew.setAttribute('style', 'border:none;text-align:center;');

        //adding cancel button
        let cancelLabel = document.createElement("label");
        cancelLabel.innerHTML = "x";
        cancelLabel.setAttribute('onclick', 'cancel(this)');
        cancelLabel.setAttribute('style', 'background:red;');
        cancelLabel.setAttribute('title', 'Cancel');
        cancelLabel.setAttribute('id', 'lbl' + i);
        tdNew.appendChild(cancelLabel);
        tr.appendChild(tdNew);


        //adding save button
        let tdNew1 = document.createElement("td");
        tdNew1.setAttribute('style', 'border:none;text-align:center;');
        let save = document.createElement("button");
        save.innerHTML = "save";
        save.setAttribute('onclick', 'save(this)');
        save.setAttribute('style', 'background:green;');
 ...