本機只有ie7,ff3.5,opera10，測試在這三個環境中測試通過。
在標準DOM中添加元素一般使用appendChild();
但用js在table中添加行時卻失效了。
網上搜了一下說 ie6，ie7不支持table.appendChild("tr")
那在JavaScript中怎麼在一個table中添加一行呢？
在http://www.w3schools.com/htmldom/dom_obj_table.asp看到w3c文檔中HTML DOM Object存在tableObject.insertRow(index)方法。何不在插入行時用這個方法呢，畢竟在html中table比普通的標籤有其特殊性，碰到table添加一行時，注意使用insertRow而不是appendChild，這樣代碼才能使用更多瀏覽器。看下面一段代碼：
- <!DOCTYPE html>
- <html>
- <head>
- <script type="text/javascript">
- function insRow()
- {
- var tbl = document.getElementById('myTable');
- var row = tbl.insertRow(0);
- var cell = row.insertCell(0);
- cell.innerHTML="new cell";
- }
- </script>
- </head>
- <body>
- <table id="myTable" border="1">
- <tr>
- <td>
- cell
- </td>
- </tr>
- </table>
- <br />
- <input type="button" onclick="insRow()" value="Insert row">
- </body>
- </html>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function insRow()
{
var tbl = document.getElementById('myTable');
var row = tbl.insertRow(0);
var cell = row.insertCell(0);
cell.innerHTML="new cell";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>
cell
</td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()" value="Insert row">
</body>
</html>
比使用標準的DOM還簡單，而且也符合w3c標準，但有一點要說明的是：
innerHTML這個方法雖然沒有在w3c文檔中出現，但是由於使用的廣泛性，很多瀏覽器都進行了支持，添加文本節點（text nodes）時可以用innerHTML，如果非要符合w3c標準，可以用createTextNode(str)方法，本例中在JavaScript最後一行改爲：cell.appendChild(document.createTextNode("new cell"))。
但是上面的例子還有一個與appendChild()不同的地方，就是appendChild值插在原有元素的後面，但是例子中是插在了第一行。怎麼插在表格的最後一行，或者插在當前行的後一行或者前一行怎麼做呢？
只要實例中把javascript改爲：var row = tbl.insertRow(tbl.rows.length);
下面附加一段帶有 在最後加一行，本行前前加一行，本行後加一行，刪除當前行的html代碼
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/htmt;charset=utf-8">
- <script type="text/javascript">
- var i=0;
- function insRow(){
- var tbl = document.getElementById("myTable");
- insRowIndex(tbl.rows.length);
- }
- function insRowIndex(rowIndex){
- var tbl = document.getElementById("myTable");
- var row = tbl.insertRow(rowIndex);
- var cell0 = row.insertCell(0);
- var cell1 = row.insertCell(1);
- cell0.innerHTML = "cell " + i++;
- cell1.innerHTML = " <input type='button' value='delete' onclick='delRow(this)'>"
- +"<input type='button' value='insBefore' onclick='insBefore(this)'>"
- +"<input type='button' value='insAfter' onclick='insAfter(this)'>";
- }
- function delRow(row){
- var tbl = document.getElementById("myTable");
- var rowrowIndex = row.parentNode.parentNode.rowIndex;
- tbl.deleteRow(rowIndex);
- }
- function insBefore(row){
- var rowrowIndex = row.parentNode.parentNode.rowIndex;
- insRowIndex(rowIndex)
- }
- function insAfter(row){
- var rowrowIndex = row.parentNode.parentNode.rowIndex;
- insRowIndex(rowIndex+1)
- }
- </script>
- </head>
- <body>
- <table id="myTable" border="1">
- <tr>
- <td>
- 單元格
- </td>
- <td>
- 操作
- </td>
- </tr>
- </table>
- <br />
- <input type="button" onclick="insRow()" value="Insert row">
- </body>
- </html>