Native JavaScript do dynamic tables (notes are clearly written) _javascript tips

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 form, so, I tried to use JS to do a dynamic table, with Firfox browser to debug, because the Firbug plug-in with a better, it was is to achieve a very small function, did not want to do so much, click on the button to 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: I do not know why the above display line number, long time no use. Note written very clearly, we learn together.

Copy Code 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 ">
<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" >
/* You can only declare variables outside of a function, and you cannot use an action method, because there is no function to invoke execution of 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 a selection box to the first column of a row
var inp = document.createelement (' input ');
Inp.type = ' checkbox ';

DOM Leve 2 Event Registration
Catchevent (INP, ' click ', function () {//Registration functions are judged in different states
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;//adds a column to count
function AddRow () {
count++;
var tab = document.getElementById (' tab ');
var firsttr = document.getElementsByTagName (' tr ') [0];
var childtd = firsttr.childnodes;
var tr = document.createelement (' tr ');
var arrtd = new Array ();
var arrinp = new Array ();
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 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
function Newsort () {
var text = new Array ();
var child_td = new Array ();
var arr_tr = document.getElementsByTagName (' tr ');
for (var i = 1;i<arr_tr.length;i++) {
Child_td[i] = arr_tr[i].childnodes[1];//Gets the node that starts all the second column from the second row
if (Child_td[i].childnodes[0]) {
Child_td[i].removechild (Child_td[i].childnodes[0]);
}
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<box.length;i++) {
Box[i].checked = true;
}
}

Cancel All Selections
function Cancelselect () {
var box = document.getelementsbyname (' Selectbox ');
for (var i = 0;i<box.length;i++) {
if (box[i].checked = = True) {
Box[i].checked =false;
}
}
}
Event Registration function
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>

<body>
<input type= "button" value= "Add" id= "Add" onclick= "AddRow ()"/>
<input type= "button" value= "all Select" onclick= "Allselect ()"/>
<input type= "button" value= "Cancel All" onclick= "Cancelselect ()"/>
<input type= "button" value= "delete" id= "delete" onclick= "deleterow ()"/>
<table id= "tab" cellpadding= "5px" cellspacing= "0px" >
<tr><td></td><td> Serial </td><td> Topic one </td><td> topic two &LT;/TD&GT;&LT;TD > Topic Three </td></tr>
</table>
</body>