javascript : to update all element of in textbox when click on edit

Question

I am new to working in javascript, I am work Dom element and create a demo of crud with the table.

CRUDCODE:

     <html>
     <head>
     <style type="text/css">
        td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
          }
    </style>
     </head>
     <input type="text" id="name"><br /><br />
     <input type="text" id="age"><br /><br />
     <input type="text" id="email"><br /><br />
     <input type="button" value="addNew" id="addNew"><br />
     <div id="output"></div>
     <script>
         let rows = [{
             name: "John",
             age: 20,
             email: "abc@gmail.com"
         }, {
            name: "Jack",
            age: 50,
            email: "pqr@gmail.com"
         }, {
            name: "Son",
            age: 45,
            email: "xyz@gmail.com"
         }];
          window.onload = building();
          let addNew = document.getElementById("addNew");
          addNew.onclick = function () {
          let name = document.getElementById("name").value;
          let age = document.getElementById("age").value;
          let email = document.getElementById("email").value;
          rows.push({
              name,
              age,
              email
          });
          console.log(rows);
          building();
          }
          function building() {
    let html = "<h1>student-Info</h1><table align='center'>";
    for (let i = 0; i < rows.length; i++) {
        html += '<tr id="id' + i + '"data-row="' + i + '">';
        html += "<td>" + rows[i].name + "</td>";
        html += "<td>" + rows[i].age + "</td>";
        html += "<td>" + rows[i].email + "</td>";
        html += "<td><a href='#' data-action='delete'>DELETE</a></td>";
        html += "<td><a href='#' data-action='edit'>Edit</a></td>";
        html += '</tr>';
    }
    html += "</table>";
    document.querySelector('#output').innerHTML = html;
     let deleted = document.querySelectorAll('[data-action="delete"]');
    for (let i = 0; i < deleted.length; i++) {
        deleted[i].addEventListener('click', function () {
            event.preventDefault();
            let ival = this.closest('[data-row]').getAttribute('data-row');
            let r = rows.splice(ival, 1);
            building();
           console.log(r);
        })
    }
    let edited = document.querySelectorAll('[data-action="edit"]');
    console.log(edited);
    for (let i = 0; i < edited.length; i++) {
        edited[i].addEventListener('click', function () {
            event.preventDefault();
            let row = this.closest('[data-row]');
            let rid = row.getAttribute('data-row');
            let td = row.firstElementChild;
            let input = document.createElement("input");
            input.type = "text";
            input.value = td.innerText;
            td.innerHTML = "";
            td.appendChild(input);
            input.onblur = function () {
                td.removeChild(input);
                td.innerHTML = input.value;
                rows[rid] = input.value;
            }
        })
    }
}

     </script>
     </html>

I am getting all array data in loop "table" but when I click on edit I am not able to convert all "td" element in "input" field,only first "" the element will be converted.

Anybody have any idea please help to sort it out. Thanks

Raj Kumar · Accepted Answer · 2020-06-23T12:18:27.150

You apply the input field for firstElement in your code, but you need to get all the editable table field and update it like this

<html>

<head>
    <style type="text/css">
        td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
    </style>
</head>
<input type="text" id="name"><br /><br />
<input type="text" id="age"><br /><br />
<input type="text" id="email"><br /><br />
<input type="button" value="addNew" id="addNew"><br />
<div id="output"></div>
<script>
    let rows = [{
        name: "John",
        age: 20,
        email: "abc@gmail.com"
    }, {
        name: "Jack",
        age: 50,
        email: "pqr@gmail.com"
    }, {
        name: "Son",
        age: 45,
        email: "xyz@gmail.com"
    }];
    window.onload = building();
    let addNew = document.getElementById("addNew");
    addNew.onclick = function () {
        let name = document.getElementById("name").value;
        let age = document.getElementById("age").value;
        let email = document.getElementById("email").value;
        rows.push({
            name,
            age,
            email
        });
        building();
    }
    function building() {
        let html = "<h1>student-Info</h1><table align='center'>";
        for (let i = 0; i < rows.length; i++) {
            html += '<tr id="id' + i + '"data-row="' + i + '">';
            html += "<td data-col='name'>" + rows[i].name + "</td>";
            html += "<td data-col='age'>" + rows[i].age + "</td>";
            html += "<td data-col='email'>" + rows[i].email + "</td>";
            html += "<td><a href='#' data-action='edit'>Edit</a></td>";
            html += "<td><a href='#' data-action='delete'>DELETE</a></td>";
            html += '</tr>';
        }
        html += "</table>";
        document.querySelector('#output').innerHTML = html;
        let deleted = document.querySelectorAll('[data-action="delete"]');
        for (let i = 0; i < deleted.length; i++) {
            deleted[i].addEventListener('click', function () {
                event.preventDefault();
                this.closest('[data-row]').parentNode.removeChild(this.closest('[data-row]'));
            })
        }
        let edited = document.querySelectorAll('[data-action="edit"]');
        for (let i = 0; i < edited.length; i++) {
            edited[i].addEventListener('click', function () {
                event.preventDefault();
                let row = this.closest('[data-row]');
                let rid = row.getAttribute('data-row');
                const tdList  = row.querySelectorAll('td[data-col]');
                [...tdList].forEach(td => {
                    let input = document.createElement("input");
                    input.type = "text";
                    input.value = td.innerText;
                    td.innerHTML = "";
                    td.appendChild(input);
                    input.onblur = function () {
                        td.removeChild(input);
                        td.innerHTML = input.value;
                        rows[rid][td.dataset.col] = input.value;
                    }
                })
            })
        }
    }

</script>

</html>

you don't need to trigger the function again, just get the `tr` element and remove from the parent, i updated. — Raj Kumar, Jun 23 '20 at 06:39
look your edit link also be text field converted, so that will not be converted as text only the filed (name, age, email) will convert into text, i don't have any issue in delete code — Parasmal Prajapati, Jun 23 '20 at 07:19
just update the css condtions like this `td:nth-last-child(n+3)` it will work — Raj Kumar, Jun 23 '20 at 07:28
when you edited the value than after you will again add new collection insert, it will be added but the value of updated td will be undefined. , check it, please — Parasmal Prajapati, Jun 23 '20 at 09:45
you need to update the `row` value when blur, then only the changes will be reflected. just do the little debugging you will get the answer for your queries — Raj Kumar, Jun 23 '20 at 10:46
i will used input.value = this.closest('[data-row]').getAttribute('data-row'); for travesing so can u solve this. i will used at end of line — Parasmal Prajapati, Jun 23 '20 at 11:42

javascript : to update all element of in textbox when click on edit

1 Answers1