A JS write Table self-add/decrement example, and a modal dialog box to pass the value of the example source code

A JS write Table self-add/decrement example, and a modal dialog box to pass the value of the example source code

Source code Download Address

I wrote a Table self-add/Subtract example with a modal box transfer value example. Share the source code, to facilitate their future reference, but also hope that more friends can be more convenient.

Main Page test.html source code:

Main Page Effect chart:

Clicking the "Add" button adds a new line by the serial number. Clicking the delete icon on each row deletes the row (which contains the edited information you entered) and updates the serial number of all rows. Clicking on the magnifying glass icon will pop up the modal dialog box, edit the information in the modal dialog box, pass the value to the main page, and update the contents of the edit box before the main page magnifier.

Modal page modal.html source code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Modal page Execution Effect chart:

        JS source file test.js source code:

Adds a row of function addtr () {var tableobj = document.getElementById ("maintable") to the end of the table; var xhtd = document.createelement ("TD") ; With (XHTD) {align= "center";} xhtd.innerhtml = Tableobj.childnodes[0].childnodes.length; var xmtd = document.createelement ("TD"); With (XMTD) {align= "center";} xmtd.innerhtml = "<input style=" border:0 "mce_style=" border:0 "type= ' text ' > '; var rygxtd = document.createelement ("TD"); With (RYGXTD) {align= "center";} rygxtd.innerhtml = "<select><option value= ' 1 ' > Father </option>< Option value= ' 2 ' > Mother </option></select> '; var sctd = document.createelement ("TD"); With (SCTD) {align= "center";} sctd.innerhtml = " '; var tr = document.createelement ("tr"); Tr.appendchild (XHTD); Tr.appendchild (XMTD); Tr.appendchild (RYGXTD); Tr.AppendChild (SCTD); var tableobj = document.getElementById ("maintable"); Tableobj.childnodes[0].appendchild (TR); //Deletes the specified row function deltr (num) {if window.confirm ("really deleted.") ")" {var tableobj = document.getElementById ("maintable"); Tableobj.childnodes[0].removechild (Tableobj.childnodes[0].childnodes[num]); Resetseq (); }//Line serial number reset function Resetseq () {var tableobj = document.getElementById ("maintable"); for (var i = 1;i < tableobj.rows.) Length;i + +) {tableobj.rows[i].cells[0].innerhtml = i;}} Modal Pass value function Editxm (num) {var tableobj = document.getElementById ("maintable"); var obj = new Object (); obj.name = "Tit Le "; var rev = window.showModalDialog ("modal.html", obj, ' dialogwidth=600px;dialogheight=600px,dialogleft=200px, Dialogtop=200px,center=yes,help=1,resizable=0,status=1,scroll=1,edge=sunken,unadorned=yes,dialoghide=0 '); if (rev) {tableobj.rows[num].cells[1].innerhtml = "<input value=" "+ rev +" ' style= "border:0" mce_style= "border:0" Typ " E= ' text ' > ';}

If you have any good suggestions for the code, please contact the author online, author Msn:defonds@hotmail.com.