昨天和今天一直在做一个利用DOM对表格进行删除行、列，添加行、列的例子，今天终于搞定了，基本的功能算是实现了。下面是完整的代码：
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<TABLE id="table1" bordercolor="#00000" width="200" border="1">
<TR>
<TD>00</TD>
<TD>01</TD>
<TD>02</TD>
<TD>03</TD>
</TR>
<TR>
<TD>10</TD>
<TD>11</TD>
<TD>12</TD>
<TD>13</TD>
</TR>
<TR>
<TD>20</TD>
<TD>21</TD>
<TD>22</TD>
<TD>23</TD>
</TR>
</TABLE>
<br>
<input type="button" value="删除一行" onclick="deleRow()" >
<input type="button" value="删除一列" onclick="deleColum()" >
<BR>
<input type="button" value="增加一行" onclick="addRow()" >
<input type="button" value="增加一列" onclick="addColum()" >
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!--
var _table = document.getElementById("table1");
function deleRow()
{
_table.deleteRow(_table.rows.length-1);
}
function deleColum()
{
for(var i=0; i<_table.rows.length;i++)
{
var colum = _table.rows[0].cells.length;//获得第一列的格子数
_table.rows[i].deleteCell(colum-1);
}
}
function addRow()
{
// 创建table的一行，等于一个tr
var trNode=_table.insertRow(_table.rows.length);
for(var j=0;j<_table.rows[0].cells.length;j++)
{
// 创建一行中的一个单元格，等于一个TD
var tdNode=trNode.insertCell(j);
// 创建TD中的文本
var text=document.createTextNode(j);
// 将文本添加到TD中
tdNode.appendChild(text);
}
}
function addColum()
{
var colum=_table.rows[0].cells.length;
for(var i = 0;i<_table.rows.length;i++)
{
var tdNode=_table.rows[i].insertCell(colum);
var text=document.createTextNode(i);
tdNode.appendChild(text);
}
}
//-->
</SCRIPT在写此代码的过程中有不少心得体会，和大家分享一下吧！
1.首先是在写var _table = document.getElementById("table1");这个语句时，老是提示document.getElementById为空或不是对象，之前我是把JavaScript代码放在的<head>中的，后来放到<html>中还是不行。我就上网搜一很久，才找到解决方法，下面的转载的别人的话，很有道理的！
(1). 'null'为空或不是对象:
<script type="text/javascript"> 里面加个defer=true属性试试看，
即:<script type="text/javascript" defer=true>
(2). document.getElementById为null
原因: var titab=document.getElementById("titletab");没有取到对象
解决办法:
1.在错误语句的下面加上alert(titab);调试语句,看看是否有消息框弹出
2.如果没有弹出,检查HTML代码中的是否存在"id=titletab"的<table>标签(要仔细哦,一个字母都不能错的)
3.如果标签存在,那么考虑<script>代码段的位置问题,切记包含有类似getElement代码<script>代码段 必须出现在HTML的Element之后也就是说你把<script>代码段放到</html>标签之后然后尝试
2.在DOM中对表格进行操作时，一定要注意rows是对象集合，返回的是对象数组，用[ ]。写代码一定要好好体会思想，自己动手写一写，不能眼高手低。一定要仔细，小到一个字母都会使整个程序发生错误。
浙公网安备 33010602011771号