Home > Developer > JavaScript
I recently read three o'reilly books, which we generally call as an animal book (which is a lot like my classmates). Then I always wanted to train my trainer with a column, I tried to make a dynamic table with js and debug it with the firfox browser because the firbug plug-in is better, originally, I wanted to implement a very small function. If I didn't want to do so much, I just clicked the button to add a line. Later, the more I added, the better I got. Post the source code and learn it together. If you have any questions, you can correct it. For beginners of js, forget to show your mercy.
Ps: I don't know why the above line number is not displayed. It has been useless for a long time. The comments are clearly written and learned together.
Copy codeThe Code is 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">
/* Only variables and the like can be declared outside the function, and operation methods cannot be used, because no function is called to execute it. */
// When loading the page, place the selection box in the table header, 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 the First row
Var indium = document. createElement ('input ');
Indium. type = 'checkbox ';
// DOM Leve 2 event registration
CatchEvent (indium, 'click', function () {// register the function for different states.
If (Indium. checked = true ){
AllSelect ();
} Else {
CancelSelect ();
}
});
// CatchEvent (indium, 'click', allSelect );
// CatchEvent (indium, 'change', cancelSelect );
Childtd [0]. appendChild (indium );
}
// Add a row
// Var count = 0; // Add 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]); // you can see why an array is added to input.
Tr. appendChild (arrtd [I]);
}
Tab. appendChild (tr );
NewSort ();
}
// Delete operation
Function deleteRow (){
Var parentTr = new Array (); // first place 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 this is the case, why cannot it be completely deleted ?? Is the response insufficient?
// Tab. removeChild (parentTr );
}
}
For (var I = 0; I <parentTr. length; I ++) {// in this way, all selected items can be deleted.
If (parentTr [I]) {// you must first determine whether the value is null. if the value is not null, an error is returned.
Tab. removeChild (parentTr [I]);
}
}
NewSort ();
}
// If deletion is performed, sort again
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]; // obtain all nodes in the second column starting 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
Function allSelect (){
Var box = document. getElementsByName ('selectbox ');
For (var I = 0; I <box. length; I ++ ){
Box [I]. checked = true;
}
}
// Deselect all
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>
</Head>
<Body>
<H3> dynamic table <Input type = "button" value = "add" id = "add" onclick = "addRow ()"/>
<Input type = "button" value = "select all" 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> NO. </td> <td> Question 1 </td> <td> Question 2 </td> <td> 3 </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
