js学习手册--Screen 对象--Table、TableHeader、TableRow、TableData 对象-优快云博客

转载：http://www.w3school.com.cn/example/hdom_examples.asp

<html> <body> <script type="text/javascript"> document.write("Screen resolution: ") document.write(screen.width + "*" + screen.height) document.write("<br />") document.write("Available view area: ") document.write(screen.availWidth + "*" + screen.availHeight) document.write("<br />") document.write("Color depth: ") document.write(screen.colorDepth) document.write("<br />") document.write("Buffer depth: ") document.write(screen.bufferDepth) document.write("<br />") document.write("DeviceXDPI: ") document.write(screen.deviceXDPI) document.write("<br />") document.write("DeviceYDPI: ") document.write(screen.deviceYDPI) document.write("<br />") document.write("LogicalXDPI: ") document.write(screen.logicalXDPI) document.write("<br />") document.write("LogicalYDPI: ") document.write(screen.logicalYDPI) document.write("<br />") document.write("FontSmoothingEnabled: ") document.write(screen.fontSmoothingEnabled) document.write("<br />") document.write("PixelDepth: ") document.write(screen.pixelDepth) document.write("<br />") document.write("UpdateInterval: ") document.write(screen.updateInterval) document.write("<br />") </script> </body> </html>
输出：

Screen resolution: 1280*800
Available view area: 1280*770
Color depth: 24
Buffer depth: undefined
DeviceXDPI: undefined
DeviceYDPI: undefined
LogicalXDPI: undefined
LogicalYDPI: undefined
FontSmoothingEnabled: undefined
PixelDepth: 24
UpdateInterval: undefined

2.1更改表格边线的宽度

<html> <head> <script type="text/javascript"> function changeBorder() { document.getElementById('myTable').border="10" } </script> </head> <body> <table border="1" id="myTable"> <tr> <td>100</td> <td>200</td> </tr> <tr> <td>300</td> <td>400</td> </tr> </table> <br /> <input type="button" οnclick="changeBorder()" value="改变边框"> </body> </html>

3.1更改表格的 cellPadding 和 cellSpacing

<html> <head> <script type="text/javascript"> function padding() { document.getElementById('myTable').cellPadding="15" } function spacing() { document.getElementById('myTable').cellSpacing="15" } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>100</td> <td>200</td> </tr> <tr> <td>300</td> <td>400</td> </tr> </table> <br /> <input type="button" οnclick="padding()" value="改变 Cellpadding"> <input type="button" οnclick="spacing()" value="改变 Cellspacing"> </body> </html>
4.1规定表格的外部边框

<html> <head> <script type="text/javascript"> function aboveFrames() { document.getElementById('myTable').frame="above" } function belowFrames() { document.getElementById('myTable').frame="below" } </script> </head> <body> <table id="myTable"> <tr> <td>100</td> <td>200</td> </tr> <tr> <td>300</td> <td>400</td> </tr> </table> <br /> <input type="button" οnclick="aboveFrames()" value="显示上边框"> <input type="button" οnclick="belowFrames()" value="显示下边框"> </body> </html>

5.1规定表格的内部边线

<html> <head> <script type="text/javascript"> function rowRules() { document.getElementById('myTable').rules="rows" } function colRules() { document.getElementById('myTable').rules="cols" } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>Row1 cell1</td> <td>Row1 cell2</td> </tr> <tr> <td>Row2 cell1</td> <td>Row2 cell2</td> </tr> <tr> <td>Row3 cell1</td> <td>Row3 cell2</td> </tr> </table> <br /> <input type="button" οnclick="rowRules()" value="仅显示行边框"> <input type="button" οnclick="colRules()" value="仅显示列边框"> </body> </html>

6.1某一行的 InnerHTML

<html> <head> <script type="text/javascript"> function showRow() { alert(document.getElementById('myTable').rows[0].innerHTML) } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>Row1 cell1</td> <td>Row1 cell2</td> </tr> <tr> <td>Row2 cell1</td> <td>Row2 cell2</td> </tr> <tr> <td>Row3 cell1</td> <td>Row3 cell2</td> </tr> </table> <br /> <input type="button" οnclick="showRow()" value="显示第一行的 innerHTML"> </body> </html>

7.1表格单元的 InnerHTML

<html> <head> <script type="text/javascript"> function cell() { var x=document.getElementById('myTable').rows[0].cells; alert(x[0].innerHTML); } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br /> <input type="button" οnclick="cell()" value="显示第一个单元"> </body> </html>

8.1为表格创建了一个标题

<html> <head> <script type="text/javascript"> function createCaption() { var x=document.getElementById('myTable').createCaption() x.innerHTML="我的表格标题" } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>Row1 cell1</td> <td>Row1 cell2</td> </tr> <tr> <td>Row2 cell1</td> <td>Row2 cell2</td> </tr> </table> <br /> <input type="button" οnclick="createCaption()" value="创建标题"> </body> </html>

9.1从表格删除行

<html> <head> <script type="text/javascript"> function deleteRow(r) { var i=r.parentNode.parentNode.rowIndex document.getElementById('myTable').deleteRow(i) } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>Row 1</td> <td><input type="button" value="删除" οnclick="deleteRow(this)"></td> </tr> <tr> <td>Row 2</td> <td><input type="button" value="删除" οnclick="deleteRow(this)"></td> </tr> <tr> <td>Row 3</td> <td><input type="button" value="删除" οnclick="deleteRow(this)"></td> </tr> </table> </body> </html>

10.1向表格添加新行 - 然后向其添加内容

<html> <head> <script type="text/javascript"> function insRow() { var x=document.getElementById('myTable').insertRow(0) var y=x.insertCell(0) var z=x.insertCell(1) y.innerHTML="NEW CELL1" z.innerHTML="NEW CELL2" } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>Row1 cell1</td> <td>Row1 cell2</td> </tr> <tr> <td>Row2 cell1</td> <td>Row2 cell2</td> </tr> <tr> <td>Row3 cell1</td> <td>Row3 cell2</td> </tr> </table> <br /> <input type="button" οnclick="insRow()" value="插入行"> </body> </html>

11.1向一个已有的行中插入单元格

<html> <head> <script type="text/javascript"> function insCell() { var x=document.getElementById('tr2').insertCell(0) x.innerHTML="John" } </script> </head> <body> <table border="1"> <tr id="tr1"> <th>Firstname</th> <th>Lastname</th> </tr> <tr id="tr2"> <td>Peter</td> <td>Griffin</td> </tr> </table> <br /> <input type="button" οnclick="insCell()" value="插入单元"> </body> </html>

12.1对齐行中的单元格内容

<html> <head> <script type="text/javascript"> function leftAlign() { document.getElementById('header').align="left"; } </script> </head> <body> <table width="100%" border="1"> <tr id="header"> <th>名</th> <th>姓</th> </tr> <tr> <td>John</td> <td>Adams</td> </tr> </table> <br /> <input type="button" οnclick="leftAlign()" value="左对齐表格行" /> </body> </html>

13.1垂直对齐行中的单元格内容

<html> <head> <script type="text/javascript"> function topAlign() { document.getElementById('tr2').vAlign="top"; } </script> </head> <body> <table width="50%" border="1"> <tr id="tr1"> <th>名</th> <th>姓</th> <th>文本</th> </tr> <tr id="tr2"> <td>John</td> <td>Adams</td> <td>你们好。我是名字是 John Adams。在本例中，我需要一段长的文本。在本例中，我需要一段长的文本。在本例中，我需要一段长的文本。</td> </tr> </table> <br /> <input type="button" οnclick="topAlign()" value="上对齐表格行" /> </body> </html>

14.1更改表格单元格中的内容

<html> <head> <script type="text/javascript"> function changeContent() { var x=document.getElementById('myTable').rows[0].cells x[0].innerHTML="新的内容" } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>Row1 cell1</td> <td>Row1 cell2</td> </tr> <tr> <td>Row2 cell1</td> <td>Row2 cell2</td> </tr> <tr> <td>Row3 cell1</td> <td>Row3 cell2</td> </tr> </table> <form> <input type="button" οnclick="changeContent()" value="改变内容"> </form> </body> </html>

15.1更改表元横跨的列数

<html> <head> <script type="text/javascript"> function changeColSpan() { document.getElementById("td1").colSpan="2"; } </script> </head> <body> <table border="1"> <tr> <th>名</th> <th>姓</th> </tr> <tr> <td id="td1">John</td> <td id="td2">Adams</td> </tr> </table> <br /> <input type="button" οnclick=changeColSpan() value="改变 colspan" /> </body> </html>