JavaScript Dynamic Add Delete Modify entry instance code

Tip: You can modify some of the code before running

<style type= "Text/css" > * {margin:0; padding:0; Body {font-family: Microsoft ya black; font-size:14px; line-height:24px; }. Wrap {width:960px; margin:0 Auto; }. Wrap H2 {padding:10px; Text-align:center; #list {padding-top:10px;} #list dl {position:relative; top:0; left:0; Border-top: #993 1px dashed; } #list DL dt {position:absolute; right:0; width:130px; Padding:0 10px; Text-align:right; } #list DL dt a {margin-right:10px; line-height:40px; Color: #333; Text-decoration:none; #list DL dt A:hover {color: #990;} #list DL dd {height:40px; line-height:40px; Overflow:hidden; margin-right:150px; Padding:0 10px; #list DL dd input {width:250px; height:30px; line-height:30px; font-family: Microsoft Ya-hei; font-size:14px; }. Btnadd {border-top: #990 1px solid; padding-top:10px; }. btnadd button {width:120px; height:40px; line-height:40px; Background-color: #993; border: #993 1px solid; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; Box-shadow:inset 1px 1px 1px #fff, inset-1px-1px 1px #fff; -moz-box-shadow:inset 1px 1px 1px #fff, inset-1px-1px 1px #fff; -o-box-shadow:inset 1px 1px 1px #fff, inset-1px-1px 1px #fff; -ms-box-shadow:inset 1px 1px 1px #fff, inset-1px-1px 1px #fff; -webkit-box-shadow:inset 1px 1px 1px #fff, inset-1px-1px 1px #fff; } </style> <div class= "wrap" > <div class= "Eg" > < <p> commodity information management </p> <div id= "List" > <dl> <dt> Modify Delete </dt><dd>untitle</dd> </dl> </div> <div class= "Btnadd" > <button id= "AddRecord" > Increase Entry </button> </div> </div> </div> <script type= "Text/javascript" > var addrecord = document.getElementById ("AddRecord"); Addrecord.onclick=function () {var list = document.getElementById ("list"); var newdl = doCument.createelement ("DL"); var NEWDT = document.createelement ("DT"); var newdd = document.createelement ("dd"); var Newa = document.createelement ("a"); var newA1 = document.createelement ("a"); Newa.setattribute (' href ', '); Newa.setattribute (' onclick ', ' return EditItem (This) '); Newa1.setattribute (' href ', '); Newa1.setattribute (' onclick ', ' return DeleteItem (This) '); var txtedit = document.createTextNode ("Modify"); var Txtdel = document.createtextnode ("delete"); Newa.appendchild (Txtedit); Newa1.appendchild (Txtdel); Newdt.appendchild (Newa); Newdt.appendchild (newA1); Newdd.appendchild (document.createTextNode ("Untitle")); Newdl.appendchild (NEWDT); Newdl.appendchild (NEWDD); List.appendchild (NEWDL); function EditItem (obj) {var objparent = Obj.parentnode; var OBJDD = objparent.nextsibling; var TEXTDD = objdd.innerhtml; alert (objdd.nodename); objdd.innerhtml = "<input type= ' text ' value= '" + textdd + "'/>";var inputbox = objdd.getelementsbytagname (' input '); Inputbox[0].focus (); obj.innerhtml = "Save"; Obj.setattribute (' href ', '); Obj.setattribute (' onclick ', ' return SaveItem (This) '); return false; function SaveItem (obj) {var objparent = Obj.parentnode; var OBJDD = objparent.nextsibling; var inputbox = objdd.getelementsbytagname (' input '); var txttitle = Inputbox[0].value; objdd.innerhtml = Txttitle; obj.innerhtml = ' modify '; Obj.setattribute (' onclick ', ' return EditItem (This) '); return false; function DeleteItem (obj) {var elm = Obj.parentNode.parentNode; var list = document.getElementById (' list '); List.removechild (ELM); return false; } </script> </td> </tr> </table>

Tip: You can modify some of the code before running