Home > Developer > JavaScript
Because look at the company a lot of dynamic forms, so I tried to use JS to do a dynamic table, the following has a good example, interested friends can refer to the following
Recently read 3 O ' Reilly's book, we generally called the Animal book (with my classmate's name is very like laughing), then always want to do an practicing to practice, because look at the company a lot of dynamic table, so, I tried to use JS to do a dynamic table, with Firfox browser to debug, because the Firbug plug-ins with a better, originally Just want to realize a very small function, do not want to do so much, click on the button can add a line on the line, and then more and more, and more good-looking. The source code posted out, we learn together, there are problems can also be corrected, JS beginners, forget the great God's pen. PS: Do not know why the above display line number, long time no use. Note written very clearly, we learn together. Code as follows: <span style= "FONT-SIZE:18PX;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> dynamic table </title> <style type=" Text/css "> body{ Background-color: #9CC; text-align:center} table{margin:10px Auto; TR th {border:1px solid #096;} td{border:1px solid #096;} </style> <script type= "Text/javascript" > /* There are only a few variables that can be declared outside of a function, and cannot be manipulated because no function is invoked to execute it. */ //Put the selection box in the table header when loading the page, because it is a one-time window.onload = function () { var tab = document.getElementById (' tab '); var firsttr = document.getElementsByTagName (' TR ') [0]; var childtd = firsttr.childnodes; ///Add selection box var inp = document.createelement (' input ') to the first row of the first column; Inp.type = ' checkbox '; //dom leve 2 Event Registration catchevent (INP, ' click ', function () {//Registration function for different states to judge &nbs P if (inp.checked ==true) { allselect (); }else{ cancelselect (); } }); //catchEvent ( INP, ' click ', Allselect); //catchevent (INP, ' Change ', Cancelselect); childtd[0].appendchild (INP); } //Add one line //var count =0;//add a column to count function addrow () { //count++; var tab = Do Cument.getelementbyid (' tab '); var firsttr = document.getelementsbytagname (' tr ') [0]; var childtd = firsttr.childnodes; var tr = document.createelement (' tr '); var arrtd = new Array (); var arrinp = new ARR Ay (); for (var i =0;i<childtd.length;i++) { Arrtd[i] = document.createelement (' TD '); arrinp[i] = document.createelement (' input '); if (i==0) { Arrinp[i].type = ' checkbox '; arrinp[i].name = ' Selectbox '; }else if (i==1) { //arrinp[i] = document.createTextNode (count); arrinp[i] = document.createTextNode ("); } Arrtd[i].appendChild ( Arrinp[i]//Thinking about why input should also be added to the array. Tr.appendchild (Arrtd[i]); } tab.appendchild (TR); Newsort (); } //delete operation function deleterow () { var parenttr = new Array ()//first put the selected row on an array var box = Document.getelementsbyname (' Selectbox '); var tab = document.getElementById (' tab '); for (var i = 0;i<box.length;i++) { if (box[i ].checked==true) { var parent = box[i].parentnode; Parenttr[i] = parent.parentnode;//If the direct this is placed inside why can't completely delete?? Is it because the reaction isn't enough? //tab.removechild (parenttr); } } for (var i = 0;i<parenttr.length;i++) {//do this to remove all the selected if (Parenttr[i]) {//This is the first time to determine whether a null value,If it is not empty to remove, no person will complain. Tab.removechild (Parenttr[i]); } } newsort (); } //If delete is performed, reorder again function Newsort () { var text = new Array (); var child_td = new Array (); var arr_tr = document.getelement Sbytagname (' tr '); for (var i = 1;i<arr_tr.length;i++) { Child_td[i] = arr_tr[i].childnodes[1];// Gets the node if (Child_td[i].childnodes[0]) { child_td[i].removechild (child_td[i].childnodes[0) of all second columns starting from the second row; } Text[i] = document.createTextNode (i); child_td[i].appendchild (text[i)); } } //Select all operations function allselect () { var box = document.getelementsbyname (' Selectbox '); for (Var i= 0;i& lt;box.length;i++) { box[i].checked = true; } } //Deselect all function Cancelselect () {& nbsp var box = document.getelementsbyname (' Selectbox '); for (var i = 0;i<box.length;i++) { if (box[i].checked = = true) { box[i].checked =false; }&nbsP } } //Event Registration functions function catchevent (eventobj,event,eventhandler) { if (eventobj.addeventlistener ) { Eventobj.addeventlistener (event,eventhandler,false); }else if (eventobj.attachevent) { event = ' On ' +event; eventobj.attachevent (event,eventhandler); } } //catchevent (Add, ' click ', AddRow); </script> </head> <body> <h3> dynamic form </h3> <input type= "button" value= "Add" id= "Add" onclick= "AddRow ()" "/> <input type=" button "value=" Select All " Onclick= "Allselect ()"/> <input type= "button" value= "All Cancel" onclick= "Cancelselect ()"/> <input Type= "button" value= "delete" id= "delete" onclick= "DeleteRow ()"/> <table id= "tab" cellpadding= "5px" cellspacing= "0px" > <tr><td></td><td> serial number </td><td> topic one </td>< Td> topic two </td><td> topic three </td></tr> </table> ≪/body> </html></span> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
