频道栏目
首页 > 程序开发 > web前端 > JavaScript教程 > JS 实例 > 正文
Table, TableHeader, TableRow, TableData 对象
2016-01-27 17:05:33           
收藏   我要投稿
改变表格边框的宽度

源代码

<!DOCTYPE html>
<html>
<head>
<script>
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="Change Border">

</body>
</html>

 

运行结果

\

改变表格的cellpadding和cellspacing

源代码

<!DOCTYPE html>
<html>
<head>
<script>
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="Change Cellpadding">
<input type="button" onclick="spacing()" value="Change Cellspacing">

</body>
</html>

 

运行结果

\

指定表格的frame

源代码

<!DOCTYPE html>
<html>
<head>
<script>
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="Show above frames">
<input type="button" onclick="belowFrames()" value="Show below frames">

</body>
</html>

 

运行结果

\

为表格指定规则

源代码

<!DOCTYPE html>
<html>
<head>
<script>
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="Show only row borders">
<input type="button" onclick="colRules()" value="Show only col borders">

</body>
</html>

 

运行结果

\

一个行的innerHTML

源代码

<!DOCTYPE html>
<html>
<head>
<script>
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="Show innerHTML of first row">

</body>
</html>

 

运行结果

\

一个单元格的innerHTML

源代码

<!DOCTYPE html>
<html>
<head>
<script>
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="Alert first cell">

</body>
</html>

 

运行结果

\

为表格创建一个标题

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function createCaption()
{
var x=document.getElementById('myTable').createCaption();
x.innerHTML="My table caption";
}
</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="Create caption">

</body>
</html>

 

运行结果

\

删除表格中的行

源代码

<!DOCTYPE html>
<html>
<head>
<script>
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="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 2</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 3</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
</tr>
</table>

</body>
</html>

 

运行结果

\

添加表格中的行

源代码

<!DOCTYPE html>
<html>
<head>
<script>
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="Insert row">

</body>
</html>

 

运行结果

\

添加表格行中的单元格

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function insCell()
{
var x=document.getElementById('tr1').insertCell(0);
x.innerHTML="The famous";
}
</script>
</head>
<body>

<table border="1">
<tr id="tr1">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br>
<input type="button" onclick="insCell()" value="Insert cell">

</body>
</html>

 

运行结果

\

单元格内容水平对齐

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function leftAlign()
{
document.getElementById('header').align="left";
}
</script>
</head>
<body>

<table width="100%" border="1">
<tr id="header">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br>
<input type="button" onclick="leftAlign()" value="Left-align table row" />

<p><b>Note:</b> This example does not work in Internet Explorer.</p>

</body>
</html>

 

运行结果

\

单元格内容垂直对齐

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function topAlign()
{
document.getElementById('tr2').vAlign="top";
}
</script>
</head>
<body>

<table width="50%" border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
<th>Text</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
<td>Hello my name is Peter Griffin. 
I need a long text for this example. 
I need a long text for this example.</td>
</tr>
</table>
<br>
<input type="button" onclick="topAlign()" value="Top-align table row" />

</body>
</html>

 

运行结果

\

对单个单元格的内容水平对齐

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function alignCell()
{
document.getElementById('td1').align="right";
}
</script>
</head>
<body>

<table border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td id="td1">Peter</td>
<td id="td2">Griffin</td>
</tr>
</table>
<br>
<input type="button" onclick="alignCell()" value="Align cell" />

</body>
</html>

 

运行结果

\

对单个单元格的内容垂直对齐

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function valignCell()
{
var x=document.getElementById('myTable').rows[0].cells;
x[0].vAlign="bottom";
}
</script>
</head>

<body>
<table id="myTable" border="1" >
<tr>
<td height="50px">第一个单元格</td>
<td>第二个单元格</td>
</tr>
<tr>
<td height="50px">第三个单元格</td>
<td>第四个单元格</td>
</tr>
</table>
<form>
<input type="button" onclick="valignCell()" value="第一个单元格内容底部对齐">
</form>
</body>

</html>

 

运行结果

\

改变单元格的内容

源代码

<!DOCTYPE html>
<html>
<head>
<script>
function changeContent()
{
var x=document.getElementById('myTable').rows[0].cells;
x[0].innerHTML="NEW CONTENT";
}
</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="Change content">
</form>
</body>

</html>

 

运行结果

\

改变行的内容

源代码

<!DOCTYPE html>

<html>

<head>

<script>

function setColSpan()

{

var x=document.getElementById('myTable').rows[0].cells;

x[0].colSpan="2";

x[1].colSpan="6";

}

</script>

</head>

 

<body>

<table id="myTable" border="1">

<tr>

<td colspan="4">cell 1</td>

<td colspan="4">cell 2</td>

</tr>

<tr>

<td>cell 3</td>

<td>cell 4</td>

<td>cell 5</td>

<td>cell 6</td>

<td>cell 7</td>

<td>cell 8</td>

<td>cell 9</td>

<td>cell 10</td>

</tr>

</table>

<form>

<input type="button" onclick="setColSpan()" value="Change colspan">

</form>

</body>

 

</html>

运行结果

\


点击复制链接 与好友分享!回本站首页
相关TAG标签 对象
上一篇:Option and Select 对象
下一篇:Adapter适配器模式在JavaScript设计模式编程中的运用分析
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站