Dom operation advanced application

 

Table

Tbodies, thead, tfoot, rows, cells

 

A table has multiple tbodies.

OTAB. tbodies [0]. Rows [I]. style. Background = "# CCC ";

 

 

Example: line-by-line color change

Window. onload = function (){
VaR OTAB = Document. getelementbyid ("tab1 ");
VaR oldcolor; // key point: Save the old style of the row
 
OTAB. tbodies [0]. Rows [0]. cells [1]. innerhtml = "Jack ";
 
For (VAR I = 0; I <OTAB. tbodies [0]. Rows. length; I ++ ){

If (I % 2 = 0 ){
OTAB. tbodies [0]. Rows [I]. style. Background = "# CCC ";
}
Else {
OTAB. tbodies [0]. Rows [I]. style. Background = "";
}


OTAB. tbodies [0]. Rows [I]. onmouseover = function (){
Oldcolor = This. style. background; // save the old style of the row
This. style. Background = "green ";
}

OTAB. tbodies [0]. Rows [I]. onmouseout = function (){
This. style. Background = oldcolor;
}
}
}

 

Add or delete rows

++

 

Window. onload = function () {var OTAB = document. getelementbyid ("tab1"); var oname = document. getelementbyid ("txtname"); var oage = document. getelementbyid ("txtage"); var obtn = document. getelementbyid ("btn1"); var maxid = OTAB. tbodies [0]. rows. length + 1; // The first obtn. onclick = function () {var OTR = document. createelement ("TR"); var otd1 = document. createelement ("TD"); var otd2 = document. createelement ("TD"); var otd3 = document. createelement ("TD"); var otd4 = document. createelement ("TD"); // var OA = document. createelement ("A"); var length = OTAB. tbodies [0]. rows. length; // var maxid = OTAB. tbodies [0]. rows [length-1]. cells [0]. innerhtml; // type 2 // otd1.innerhtml = parseint (maxid) + 1; otd1.innerhtml = maxid ++; otd2.innerhtml = oname. value; otd3.innerhtml = oage. value; otd4.innerhtml = '<a href = "javascript:;"> Delete </a>';/* OA. innerhtml = "delete"; OA. setattribute ("href", "javascript:;"); otd4.appendchild (OA); */OTR. appendchild (otd1); OTR. appendchild (otd2); OTR. appendchild (otd3); OTR. appendchild (otd4); // exception: it is normal to delete the newly added row. It is abnormal to delete the old row.
Otd4.getelementsbytagname ("A") [0]. onclick = function () {OTAB. tbodies [0]. removechild (this. parentnode. parentnode);} OTAB. tbodies [0]. appendchild (OTR);} // exception: the newly added row cannot delete var AA = OTAB. tbodies [0]. getelementsbytagname ("A"); For (VAR I = 0; I <AA. length; I ++) {AA [I]. onclick = function () {OTAB. tbodies [0]. removechild (this. parentnode. parentnode );}}}




Table search
++ ++

Window. onload = function () {var otxt = document. getelementbyid ("txt1"); var obtn = document. getelementbyid ("btn1"); var OTAB = document. getelementbyid ("tab1"); obtn. onclick = function () {for (VAR I = 0; I <OTAB. tbodies [0]. rows. length; I ++) {var orow = OTAB. tbodies [0]. rows [I]; var vtd = orow. cells [1]. innerhtml; // If (otxt. value = vtd) {// If (vtd. search (otxt. value )! =-1) {// fuzzy search Str. Search () // If (vtd. tolowercase (). Search (otxt. value. tolowercase ())! =-1) {// fuzzy search Str. search () + ignore case sensitivity // associated search such as "Zhang, Li" Var arr = otxt. value. split (','); orow. style. background = ""; for (var j = 0; j <arr. length; j ++) {// I cannot be defined here; otherwise, if (vtd. tolowercase (). search (ARR [J]. tolowercase ())! =-1) {// fuzzy search Str. Search () + case-insensitive orow. style. Background = "green ";}}}}}