js学习之Table,TableHeader,TableRow,TableData对象

[color=cyan][size=x-large]Table,TableHeader,TableRow,TableData对象
[/size][/color]

[b][color=blue]更改表格边缘宽度[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

[color=brown]ps:TableRow应该就是tr标签,TableData应该就是td标签,tableHeader应该是th标签,这也是我的推测,没去研究,反正知道怎么用就Ok了,哎!感觉自己不求甚解啊![/color] :cry: :cry:

<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>


[b][color=blue]更改表格cellPadding和cellSpacing[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<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>

[color=brown]
ps:cellPadding是td与tr之间的间隙,cellSpacing是tr与table之间的间隙,个人感觉效果就是这样的,不知道解释错了没,自己可以测一下,免得我误人子弟,毁人前途[/color]


[b][color=blue]规定表格的外部边框[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<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>



[b][color=blue]规定表格的内部边框[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<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>



[b][color=blue]显示表格的第一行的innerHtml[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<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>



[b][color=blue]表格单元的InnterHtml[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<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>



[b][color=blue]为表格创建标题[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<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>



[b][color=blue]从表格删除行[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<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>



[b][color=blue]向表格添加新行,然后向其添加内容[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<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>



[b][color=blue]向一个已有的行中插入单元格[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<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>



[b][color=blue]对齐行中的单元格内容[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<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>


[b][color=blue]垂直对齐行中的单元格内容[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<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>



[b][color=blue]对齐单元格中的内容[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<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>


[b][color=blue]垂直对齐单元格中的内容[/color][/b][b][color=orange]代码来自w3school
[/color][/b]


<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>



[b][color=blue]改变表格单元格中的内容[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<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>


[b][color=blue]更改表格横跨的列数[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值