Day36-javascript Application of Table tables

Career development, code 100 days--2018-04-21

Today, the JavaScript is used to manipulate table tables, including the acquisition of table elements, creation, deletion, and so on.

An ordinary complete form consists of the following sections: TABLE->THEAD->TBODY->TR->TD, etc.

1. Creation of tables

As in the following table, the header section: Serial number-name-age

It has three rows and three columns of content, belonging to the Tbody section

Its HTML structure is as follows:

<TableID= "tab"Border= "3"width= "600px"Height= "40px" >        <thead>            <TD>Serial number</TD>            <TD>Name</TD>            <TD>Age</TD>        </thead>        <tbody>            <TR>                <TD>1</TD>                <TD>Tom</TD>                <TD>23</TD>            </TR>            <TR>                <TD>2</TD>                <TD>John</TD>                <TD>33</TD>            </TR>            <TR>                <TD>3</TD>                <TD>July</TD>                <TD>21st</TD>            </TR>                    </tbody>    </Table>

2. Getting the table elements

For example, if you want to get the cell content of age 21 in the table above, what is the method?

The most common idea is to get table->tbody->tr->td gradually.

As follows:

getElementsByTagName

    function () {                    var otab = document.getElementById ("tab");          Alert (Otab.getelementsbytagname (' tbody ') [0].getelementsbytagname (' tr ') [2].getelementsbytagname (' TD ') [2 ].innerhtml);        };

In fact, the table itself includes the row and column columns method

alert (otab.tbodies[0].rows[2].cells[2].innerhtml);

That gets tbody can be used tbodies

Fetch rows with rows

Get cells with cells

3. Interlaced discoloration

//Alternating color           < Otab . tbodies[0].rows.length; i++) {               if (i%2) {                   = "";               } else               {                   otab.tbodies[0].rows[i].style.background= "#666";               }          }

4. Mouse move-out table color change

// Mouse Move-out discoloration action               function () {                  this. style.background= "#999";                };               otab.tbodies[function() {                   this. style.background= "";               } 

When the mouse hovers over a row in the table, the color of the row is discolored.

So its basic function is completed, but in combination with the previous step, if the line is required to change color, the mouse movement operation color effect will be?

 //Interlaced Color           for(vari = 0; i < otab.tbodies[0].rows.length; i++) {               if(i%2) {otab.tbodies[0].rows[i].style.background = ""; }Else{otab.tbodies[0].rows[i].style.background= "#666"; }               //Mouse Move-out discoloration actionOtab.tbodies[0].rows[i].onmouseover =function(){                   This. style.background= "#999";               }; otab.tbodies[0].rows[i].onmouseout =function(){                    This. style.background= ""; }          }

Move the mouse to the first row, the effect:

However, when the mouse is removed, the color is white, that is, the space set in the code

This is not the effect we expected ...

The handling of this problem, in fact, is also very simple, that is, set a variable to save the mouse moving the color of the row, the mouse to move away from the restore.

   //Interlaced Color           for(vari = 0; i < otab.tbodies[0].rows.length; i++) {               var ooldcolor = null; Create a new variable to save the current row color if(i%2) {otab.tbodies[0].rows[i].style.background = ""; }Else{otab.tbodies[0].rows[i].style.background= "#666"; }               //Mouse Move-out discoloration actionOtab.tbodies[0].rows[i].onmouseover =function() { Ooldcolor = this. Style.background; Save the color before discoloration  This. style.background= "#999";               }; otab.tbodies[0].rows[i].onmouseout =function(){                   This  . style.background= Ooldcolor; Revert to previous color }}

Day36-javascript Application of Table tables