泉州浮桥网页设计培训班实例笔记HTML DOM 实例(十一)-Screen 对象

TableTableHeaderTableRowTableData 对象

更改表格边线的宽度

<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” onclick=”changeBorder()” value=”改变边框”>

</body></html>

更改表格的 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” onclick=”padding()” value=”改变 Cellpadding”>

<input type=”button” onclick=”spacing()” value=”改变 Cellspacing”>

</body></html>

规定表格的外部边框

<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” onclick=”aboveFrames()” value=”显示上边框”>

<input type=”button” onclick=”belowFrames()” value=”显示下边框”>

</body></html>

规定表格的内部边线

<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” onclick=”rowRules()” value=”仅显示行边框”>

<input type=”button” onclick=”colRules()” value=”仅显示列边框”>

 

</body></html>

某一行的 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” onclick=”showRow()” value=”显示第一行的 innerHTML”>

 

</body></html>

表格单元的 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” onclick=”cell()” value=”显示第一个单元”>

 

</body>

</html>

为表格创建了一个标题

<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” onclick=”createCaption()” value=”创建标题”>

</body></html>

从表格删除行

<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=”删除” onclick=”deleteRow(this)”></td>

</tr>

<tr>

<td>Row 2</td>

<td><input type=”button” value=”删除” onclick=”deleteRow(this)”></td>

</tr>

<tr>

<td>Row 3</td>

<td><input type=”button” value=”删除” onclick=”deleteRow(this)”></td>

</tr>

</table>

</body>

</html>

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

<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” onclick=”insRow()” value=”插入行”>

</body>

</html>

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

<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” onclick=”insCell()” value=”插入单元”>

 

</body>

</html>

对齐行中的单元格内容

<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” onclick=”leftAlign()” value=”左对齐表格行” />

</body>

</html>

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

<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” onclick=”topAlign()” value=”上对齐表格行” />

 

</body>

</html>

对齐单元格中的内容

<html>

<head>

<script type=”text/javascript”>

function alignCell()

{

document.getElementById(‘td1’).align=”right”

}

</script>

</head>

<body>

 

<table border=”1″>

<tr>

<th>—–名—–</th>

<th>—–姓—–</th>

</tr>

<tr>

<td id=”td1″>John</td>

<td>Adams</td>

</tr>

</table>

 

<form>

<input type=”button” onclick=”alignCell()”

value=”对齐 ‘John’ 单元格” />

</form>

 

</body>

</html>

 

垂直对齐单元格中的内容

<html>

<head>

<script type=”text/javascript”>

function topAlign()

{

document.getElementById(‘td1’).vAlign=”top”;

document.getElementById(‘td2’).vAlign=”top”;

document.getElementById(‘td3’).vAlign=”top”;

}

</script>

</head>

<body>

 

<table width=”50%” border=”1″>

<tr>

<th>名</th>

<th>姓</th>

<th>文本</th>

</tr>

<tr>

<td id=”td1″>John</td>

<td id=”td2″>Adams</td>

<td id=”td3″>你们好。我是名字是 John Adams。

在本例中,我需要一段长的文本。

在本例中,我需要一段长的文本。

在本例中,我需要一段长的文本。</td>

</tr>

</table>

<br />

<input type=”button” onclick=”topAlign()” value=”上对齐表格单元” />

 

</body>

</html>

更改表格单元格中的内容

<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” onclick=”changeContent()” value=”改变内容”>

</form>

</body>

</html>

更改表元横跨的列数

<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” onclick=changeColSpan() value=”改变 colspan” />

</body></html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注