Summary

In front-end development, tables are mainly used to store structured data, and CSS is mainly used to decorate DOM elements. How can tables and CSS be manipulated through DOM?In this paper, through some simple small examples, briefly describe the common operation methods of DOM on tables and CSS, for learning to share, if there are any deficiencies, please also correct.

Get tables and data

If there is currently a table with id tb01, as follows:

 1 <table id="tb01" width="300" border="1" cellspacing="2" cellpadding="2">
 2     <caption>Personnel table</caption>
 3     <thead>
 4         <tr>
 5             <td>Full name</td>
 6             <td>Gender</td>
 7             <td>Age</td>
 8         </tr>
 9     </thead>
10     <tbody>
11         <tr>
12             <td>Tom</td>
13             <td>boy</td>
14             <td>20</td>
15         </tr>
16         <tr>
17             <td>Jack</td>
18             <td>girl</td>
19             <td>19</td>
20         </tr>
21     </tbody>
22     <tfoot>
23         <tr>
24             <td colspan="3">Total: 2</td>
25         </tr>
26     </tfoot>
27 </table>

Get the title [caption], header [thead], content [tbody], footer [tfoot], number of rows [rows], number of columns [cells] of a row, and so on of the table, as follows:

 1 var table=document.getElementById('tb01');
 2 alert(table.caption.innerText);//Get title text
 3 alert(table.tHead);//Get the header, output[object HTMLTableSectionElement]
 4 alert(table.tBodies);//Obtain tbody Output:[object HTMLCollection]
 5 alert(table.tFoot);//Get end of table, output[object HTMLTableSectionElement]
 6 
 7 alert(table.rows.length);//Get 4 rows
 8             
 9 alert(table.tBodies[0].rows.length);//Obtain tbody How many lines, 2 lines
10 alert(table.tBodies[0].rows[0].cells.length);//Get how many columns the corresponding row has, three columns

Get the contents of the cell as follows:

1 alert(table.tBodies[0].rows[1].cells[1].innerHTML);//Obtain tody Content output for row 2 and column 2 below: girl

How to delete headings [caption], headers [thead], footers [tfoot], rows [row], cells [cell], etc. from a table as follows:

1 table.deleteCaption();//Delete Title            
2 table.deleteTHead();//Delete Header
3 table.deleteTFoot();//Delete End of Table
4 table.tBodies[0].deleteRow(0);//delete tbody Line 0
5 table.tBodies[0].rows[0].deleteCell(1);//delete tbody Column 1 of row 0, right cell forward

Create tables and fill in data

Create a new table from 0 and display it on the page as follows:

1. Create table elements from createElement('table')
2. Create a title from table.createCaption()
3. Create a table header from table.createTHead()
4. Through the table.createTBody() form tbody
5. Insert a new row through tbody.insertRow(0) and return the row object.
6. Create cells with insertCell(0)
7. Through document.body.appendChild(table); insert table into body

 1 var table=document.createElement('table');
 2 table.border=1;
 3 table.width=300;
 4 table.createCaption().innerHTML='Personnel Table 2';
 5 var thead = table.createTHead();
 6 var tr = thead.insertRow();
 7 tr.insertCell(0).innerHTML='Name';
 8 tr.insertCell(1).innerHTML='Sexy';
 9 tr.insertCell(2).innerHTML='Age';
10 var tbody=table.createTBody();
11 var tr0 =tbody.insertRow(0);
12 tr0.insertCell(0).innerHTML='Lily';
13 tr0.insertCell(1).innerHTML='girl';
14 tr0.insertCell(2).innerHTML='12';
15 var tr1 =tbody.insertRow(1);
16 tr1.insertCell(0).innerHTML='Lucy';
17 tr1.insertCell(1).innerHTML='girl';
18 tr1.insertCell(2).innerHTML='13';
19 var tfoot=table.createTFoot();
20 var tr3 = tfoot.insertRow();
21 var tc3= tr3.insertCell(0);
22 tc3.innerHTML='Total: 2';
23 tc3.colSpan=3;
24 document.body.appendChild(table);//take table Insert into body in

CSS style

There are three types of CSS:

1. In-line style, which sets the style property of the label
2. Inline Style, that is, Tag Content Settings for <style>
3. External style, i.e. introduced through <link href >

DOM operation style

There is a DIV style as follows:

1 <div id="A01" style="color: red;background-color: blanchedalmond;font-size: 30px;float: left;">Hello JavaScript</div>

How to get style set by style

 1 var box=document.getElementById('A01');
 2 alert(box.style);//box Inline style object.Output:[object MSStyleCSSProperties]
 3 alert( box.style.color);//Gets the set color
 4 alert(box.style.backgroundColor);//Gets the background color of the setting, if there are-Connector, in uppercase
 5 alert(box.style.fontSize);//Gets the set font size 30 px
 6 box.style.float;//Keyword, error will occur
 7 alert(box.style.styleFloat);//IE11 Support, get floating left
 8 alert(box.style.cssFloat);//IE11 Support, get floating left
 9 alert(box.style.cssText);//Obtain style Text content
10 box.style.setProperty('color','yellow');//IE11 Support for setting style properties

Get the calculated style

1 //Get the calculated style
2 var s = window.getComputedStyle(box,null);//IE11 support, return [object CSSStyleDeclaration]
3 alert(s);
4 alert(s.color);//Return: rgb(255,0,0) 

Get Current Style

1 var s =box.currentStyle;//IE11 support, return [object MSCurrentStyleProperties]
2 alert(s);
3 alert(s.color);//Return:red

Change Style

There is a DIV element style as follows:

1 <div id="box" class="one" style="color: orange;">hello js!!!</div>

When an element's style is set through an ID, you can change the style by changing the ID, but this is generally not recommended because the ID is unique and random changes can cause confusion.As follows:

1 var box=document.getElementById('box');
2 box.id='pox';//This is not generally recommended because IDs are unique.

Adding styles through class es

DOM obtains and changes styles through className as follows:

 1 //Adding styles through class es
 2 var box=document.getElementById('box');
 3 box.className='two';//The previous style will be cleared and added again, overwriting the previous css Style
 4 box.className='one two';//You can write multiple styles at once
 5 function hasClass(element ,cname){
 6     var className=element.className;
 7     //return !!!className.match(new RegExp(cname));
 8     return  className.indexOf(cname,0)>-1;
 9 }
10 alert( hasClass(box,'one'));//Returns whether a style is included
11             
12 //Add Style
13 function addClass(box,cname){
14     box.className+=' '+cname;
15 }
16             
17 //Delete Style
18 function removeClass(box,cname){
19     box.className = box.className.replace(cname,' ');
20 }

DOM Operations External Styles

Get link

 1 //Obtain link
 2 var link=document.getElementsByTagName('link')[0];//Get First link Connected External css File object
 3 var sheet=link.sheet || link.stylesheet;//To prevent browser incompatibility
 4 alert(sheet);//Output:[object CSSStyleSheet]
 5         
 6 //If there are link And style Getting it can be cumbersome
 7 var sheets = document.styleSheets;
 8 alert(sheets);//Get is styleSheets List Output[object StyleSheetList]
 9 var sheet=sheets[0];
10 alert( sheet.disabled);//Is Disabled
11 alert(sheet.href);//css Path to Style
12 alert(sheet.title);//Get or Set link Of title
13 alert(sheet.media[0]);//IE11，yes undefined

CSS Style Rule Collection

1 alert(sheet.cssRules);//CSS Style rule set, output [object CSSRuleList]
2 alert(sheet.cssRules.length);//Length of rule
3 alert(sheet.cssRules[0].cssText);//Of the first rule css text .one{font-size:20px;}
4 alert(sheet.cssRules[0].selectorText);//Selector output for the first rule.one
5 sheet.deleteRule(0);//Delete the first rule
6 sheet.insertRule('body{background-color:orange;}',0);//Insert a rule, first parameter: rule content, second parameter: insert location

The following methods are consistent with the above and can be compatible with both to accommodate different browsers, as follows:

1 alert( sheet.rules);//output[object MSCSSRuleList]
2 alert(sheet.rules[0].selectorText);////Selector output for the first rule.one
3 alert(sheet.rules[0].cssText);//Of the first rule css text .one{font-size:20px;}
4 sheet.addRule('body','background-color:orange;',0);//Add Rule
5 sheet.removeRule(0);//Delete Rule
6 alert( sheet.rules[0].style.color);//In-line, inline, style available
7 alert(sheet.cssRules[0].style.color);

Remarks

Second Beigu Mountain
[Tang] Wangwan

Outside the mountain on the passenger road, before sailing in green water.Both sides of the tide are wide and the wind is flying.

Sea days and nights, spring into the old year.Where can Township books be reached?Gui Yan Luo Yang Bian.