首頁 > 開發者 > JavaScript
Table, TableHeader, TableRow, TableData 對象，
改變表格邊框的寬度
原始碼
<!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>
運行結果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
