I have to make add, edit and delete functionality in dynamically generated rows using javascript. I am stuck with the edit functionality . Though I have searched and it can be done but in that php is used . I don't need php . Can someone tell me how to make it in easy way . Add and delete functions worked. But Edit function doesn't work.

 <script>
        document.write("<table id='TABLE' border='1' width='500'>");
            document.write("<tr>");
                document.write("<td>ID</td>");
                document.write("<td>Name</td>");
                document.write("<td>Address</td>");
                document.write("<td>Age</td>");
                document.write("<td>Action</td>");
            document.write("</tr>");

            document.write("<tr id='row1'>");
                document.write("<td id='id_row1'>1</td>");
                document.write("<td id='name_row1'>Anu</td>");
                document.write("<td id='address_row1'>Colombo</td>");
                document.write("<td id='age_row1'>20</td>");
                document.write("<td><button id='edit_button1' class='edit' onclick='editrow('1')'>Edit</button> <button id='save_button1' class='save' onclick='saverow('1')'>Save</button><button class='delete' onclick='deleterow()'>Delete</button></td>");
            document.write("</tr>");

            document.write("<tr id='row2'>");
                document.write("<td id='id_row2'><input type='text' id='new_id'></td>");
                document.write("<td id='name_row2'><input type='text' id='new_name'></td>");
                document.write("<td id='address_row2'><input type='text' id='new_address'></td>");
                document.write("<td id='age_row2'><input type='text' id='new_age'></td>");
                document.write("<td><button onclick='addrow()'>Add Row</button></td>");
            document.write("</tr>");
        document.write("</table>");

        function editrow(x){

            document.getElementById("edit_button" x).style.display="none";
            document.getElementById("save_button" x).style.display="block";
                
            var id=document.getElementById("id_row" x);
            var name=document.getElementById("name_row" x);
            var address=document.getElementById("address_row" x);
            var age=document.getElementById("age_row" x);

            var id_data=id.innerHTML;
            var name_data=name.innerHTML;
            var address_data=address.innerHTML;
            var age_data=age.innerHTML;
                
            var id_data="<input type='text' id='id_text" x "' value='" id_data "'>";
            var name_data="<input type='text' id='name_text" x "' value='" name_data "'>";
            var address_data="<input type='text' id='address_text" x "' value='" address_data "'>";
            var age_data="<input type='text' id='age_text" x "' value='" age_data "'>"; 
        } 

        function saverow(y){
            var id_val=document.getElementById("id_text" y).value;
            var name_val=document.getElementById("name_text" y).value;
            var address_val=document.getElementById("address_text" y).value;
            var age_val=document.getElementById("age_text" y).value;

            document.getElementById("id_row" y).innerHTML=id_val;
            document.getElementById("name_row" y).innerHTML=name_val;
            document.getElementById("address_row" y).innerHTML=address_val;
            document.getElementById("age_row" y).innerHTML=age_val;

            document.getElementById("edit_button" y).style.display="block";
            document.getElementById("save_button" y).style.display="none";
        }

        function deleterow() {
            var td = event.target.parentNode; 
            var tr = td.parentNode;
            tr.parentNode.removeChild(tr);
        }

        function addrow(){
            var new_id=document.getElementById("new_id").value;
            var new_name=document.getElementById("new_name").value;
            var new_address=document.getElementById("new_address").value;
            var new_age=document.getElementById("new_age").value;
                
            var mytable=document.getElementById("TABLE");
            var t_length=(mytable.rows.length)-1;
            var row = mytable.insertRow(t_length).outerHTML="<tr id='row" t_length "'><td id='id_row" t_length "'>" new_id "</td><td id='name_row" t_length "'>" new_name "</td><td id='address_row" t_length "'>" new_address "</td><td id='age_row" t_length "'>" new_age "</td><td><input type='button' id='edit_button" t_length "' value='Edit' class='edit' onclick='editrow(" t_length ")'> <input type='button' id='save_button" t_length "' value='Save' class='save' onclick='saverow(" t_length ")'> <input type='button' value='Delete' class='delete' onclick='deleterow(" t_length ")'></td></tr>";

            document.getElementById("new_id").value="";
            document.getElementById("new_name").value="";
            document.getElementById("new_address").value="";
            document.getElementById("new_age").value="";
        }
    </script>

CodePudding user response：

here is some changes in your code, you have to add innerHtml code into editrow function

        document.write("<table id='TABLE' border='1' width='500'>");
            document.write("<tr>");
                document.write("<td>ID</td>");
                document.write("<td>Name</td>");
                document.write("<td>Address</td>");
                document.write("<td>Age</td>");
                document.write("<td>Action</td>");
            document.write("</tr>");

            document.write("<tr id='row1'>");
                document.write("<td id='id_row1'>1</td>");
                document.write("<td id='name_row1'>Anu</td>");
                document.write("<td id='address_row1'>Colombo</td>");
                document.write("<td id='age_row1'>20</td>");
                document.write("<td><button id='edit_button1' class='edit' onclick='editrow('1')'>Edit</button> <button id='save_button1' class='save' onclick='saverow('1')'>Save</button><button class='delete' onclick='deleterow()'>Delete</button></td>");
            document.write("</tr>");

            document.write("<tr id='row2'>");
                document.write("<td id='id_row2'><input type='text' id='new_id'></td>");
                document.write("<td id='name_row2'><input type='text' id='new_name'></td>");
                document.write("<td id='address_row2'><input type='text' id='new_address'></td>");
                document.write("<td id='age_row2'><input type='text' id='new_age'></td>");
                document.write("<td><button onclick='addrow()'>Add Row</button></td>");
            document.write("</tr>");
        document.write("</table>");

        function editrow(x){

            document.getElementById("edit_button" x).style.display="none";
            document.getElementById("save_button" x).style.display="block";
                
            var id=document.getElementById("id_row" x);
            var name=document.getElementById("name_row" x);
            var address=document.getElementById("address_row" x);
            var age=document.getElementById("age_row" x);

            var id_data=id.innerHTML;
            var name_data=name.innerHTML;
            var address_data=address.innerHTML;
            var age_data=age.innerHTML;
                
            var id_data="<input type='text' id='id_text" x "' value='" id_data "'>";
            var name_data="<input type='text' id='name_text" x "' value='" name_data "'>";
            var address_data="<input type='text' id='address_text" x "' value='" address_data "'>";
            var age_data="<input type='text' id='age_text" x "' value='" age_data "'>"; 

            id.innerHTML = (id_data);
            name.innerHTML = (name_data);
            address.innerHTML = (address_data);
            age.innerHTML = (age_data);
        } 

        function saverow(y){
            var id_val=document.getElementById("id_text" y).value;
            var name_val=document.getElementById("name_text" y).value;
            var address_val=document.getElementById("address_text" y).value;
            var age_val=document.getElementById("age_text" y).value;

            document.getElementById("id_row" y).innerHTML=id_val;
            document.getElementById("name_row" y).innerHTML=name_val;
            document.getElementById("address_row" y).innerHTML=address_val;
            document.getElementById("age_row" y).innerHTML=age_val;

            document.getElementById("edit_button" y).style.display="block";
            document.getElementById("save_button" y).style.display="none";
        }

        function deleterow() {
            var td = event.target.parentNode; 
            var tr = td.parentNode;
            tr.parentNode.removeChild(tr);
        }

        function addrow(){
            var new_id=document.getElementById("new_id").value;
            var new_name=document.getElementById("new_name").value;
            var new_address=document.getElementById("new_address").value;
            var new_age=document.getElementById("new_age").value;
                
            var mytable=document.getElementById("TABLE");
            var t_length=(mytable.rows.length)-1;
            var row = mytable.insertRow(t_length).outerHTML="<tr id='row" t_length "'><td id='id_row" t_length "'>" new_id "</td><td id='name_row" t_length "'>" new_name "</td><td id='address_row" t_length "'>" new_address "</td><td id='age_row" t_length "'>" new_age "</td><td><input type='button' id='edit_button" t_length "' value='Edit' class='edit' onclick='editrow(" t_length ")'> <input type='button' id='save_button" t_length "' value='Save' class='save' onclick='saverow(" t_length ")'> <input type='button' value='Delete' class='delete' onclick='deleterow(" t_length ")'></td></tr>";

            document.getElementById("new_id").value="";
            document.getElementById("new_name").value="";
            document.getElementById("new_address").value="";
            document.getElementById("new_age").value="";
        }