js学习手册--Screen 对象--Table、TableHeader、TableRow、TableData 对象

鲍驰

2023-12-01

转载：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>

js学习手册--Screen 对象--Table、TableHeader、TableRow、TableData 对象

相关阅读

相关文章

相关问答

相关文档