Measure the test taker's knowledge about table attributes and subtags.
<Table> also contains the <thead>, <tbody>, and <tfoot> tags. They indicate the table header, table body, and table footer respectively. When printing the content of a webpage, if the table is large and one page cannot be printed, <thead> and <tfoot> will appear on each page. (Note: It is invalid in IE but valid in Firefox)/p> A table example
<Html>The table is shown as follows:
| 2005 | 2006 | 2007 | 2008 | |
|---|---|---|---|---|
| Appropriation | 11,980 | 12,650 | 9,700 | 10,600 |
| Donation | 4,780 | 4,989 | 6,700 | 6,590 |
| Investment | 8,000 | 8,100 | 8,760 | 8,490 |
| Fundraising | 3,200 | 3,120 | 3,700 | 4,210 |
| 2008 Statistics | ||||
Note: IE6 only supports the <a> flag: hover pseudo class. Other labels are not supported! And the <a> marked pseudo classes are ordered: a: link-> a: visited-> a: hover-> a: active
Use DOM methods and attributes to perform dynamic table operationsUse DOM to dynamically Add a row:
<Script language = "javascript"> window. onload = function () {// insert a line var oTr = document. getElementById ("mytable "). insertRow (2); var aText = new Array (); aText [0] = document. createTextNode ("cell1 content"); aText [1] = document. createTextNode ("cell2 content"); aText [2] = document. createTextNode ("cell3 content"); aText [3] = document. createTextNode ("cell4 content"); aText [4] = document. createTextNode ("cell5 content"); for (var I = 0; I <aText. length; I ++) {var oTd = oTr. insertCell (I); oTd. appendChild (aText [I]) ;}</script>
Use DOM to modify cell content:
<Script language = "javascript"> window. onload = function () {var oTable = document. getElementById ("mytable"); // modify the cell content oTable. rows [3]. cells [4]. innerHTML = "changed content" ;}</script>
Use DOM to delete a cell or row:
<Script language = "javascript"> window. onload = function () {var oTable = document. getElementById ("mytable"); // delete a row, and the following row number is automatically added to oTable. deleteRow (2); // delete a cell, and oTable is automatically added later. rows [2]. deleteCell (1) ;}</script>
Use DOM to dynamically Add a column and delete a row dynamically:
<Script language = "javascript"> function myDelete () {var oTable = document. getElementById ("mytable"); // Delete this row. parentNode. parentNode. parentNode. removeChild (this. parentNode. parentNode);} window. onload = function () {var oTable = document. getElementById ("mytable"); var oTd; // dynamically Add the delete link for (var I = 1; I <oTable. rows. length; I ++) {oTd = oTable. rows [I]. insertCell (5); oTd. innerHTML = "<a href = '#'> delete </a>"; oTd. firstChild. onclick = myDelete; // Add deletion event }}</script>
Use DOM to dynamically delete a column:
<Script language = "javascript"> function deleteColumn (oTable, iNum) {// User-Defined delete column function, that is, each row deletes the corresponding cell for (var I = 0; I <oTable. rows. length; I ++) oTable. rows [I]. deleteCell (iNum);} window. onload = function () {var oTable = document. getElementById ("mytable"); deleteColumn (oTable, 2); // parameter 2: column number to be deleted} </script>
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
