使用 JavaScript 编辑功能

Question

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>

Answer 1

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=""; }