JavaScript DOM 动态创建与操作表格详解

DOM创建表格基础与动态生成方式

Dom基础—创建表格

在JavaScript中动态生成表格主要有两种方式：使用appendChild()方法，或者使用insertRow()与insertCell()方法。由于第一种方式在Internet Explorer浏览器中可能存在兼容性问题，因此推荐采用第二种方式。

insertRow与insertCell方法详解

1、insertRow(index)：index从0开始

该函数用于在指定索引index对应的行之前插入新行。例如，调用insertRow(0)会在第一行之前插入新行。如果不传参数，默认调用insertRow()等同于insertRow(-1)，即把新行追加到表格末尾。通常使用方式如下：

objTable.insertRow (objTable.rows.length)即为表格objTable在末尾新增一行。

insertCell()方法与insertRow()的用法基本一致。

deleteRow删除行及注意事项

2、deleteRow(index)：index从0开始

用于删除指定位置的行。需要传入的参数Index表示该行在表格中的位置索引，可以通过以下方法获取该索引后进行删除：

var row = document.getElementById("行的Id");

var index = row.rowIndex; //有这个属性

objTable.deleteRow(index);

在删除表格行的过程中，需要注意：一旦删除某一行，表格的行数会立即减少，rows.length属性值随之变小。因此，如果要删除表格中的所有行，需注意索引变化：

 
function removeAllRow() {
var objTable = document.getElementById("myTable");
var length = objTable.rows.length;
for (var i = 1; i < length; i++) {
objTable.deleteRow(i);
} 
} 

setAttribute设置表格与单元格属性

3、setAttribute()方法,动态设置单元格与行的属性

格式如下：setAttribute(属性，属性值)

var objMyTable = document.getElementById("myTable");

objMyTable.setAttribute("border", 1); //为表格设置边框为1

在使用该方法设置样式时，可能会遇到一个关于类名设置的问题。不能直接使用

setAttribute("class","inputbox1");而应该使用

setAttribute("className","inputbox1")，

完整创建表格示例代码

4、创建表格

掌握了行<tr>与单元格<td>的增删操作后，即可开始创建表格。

第一步：你需要有一个你去动态变化的表格，这里讲的是已经存在页面的表格,我们设置一个id：myTable

var objMyTable = document.getElementById("myTable");

第二步：创建行与列的对象

 
var index = objMyTable.rows.length;
var nextRow = objMyTable.insertRow(index); //在最后的行
//var nextRow = objMyTable.insertRow(0); //在最前的行

下面是示例代码

 
<script type="text/javascript">
var Count = false; //控制交替换行
var NO = 1; //行号
function addRow() {
Count = !Count;
//添加一行
var newTr = table.insertRow(table.rows.length); //在最后新增一行
//var newTr = table.insertRow(0); //在最前面新增一行
//添加两列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
//设置列内容和属性
if (Count) {
newTr.style.background = "#FFE1FF";
} 
else {
newTr.style.background = "#FFEFD5";
} 
NO++;
newTd0.innerHTML = '<input type=checkbox id="box' + NO + '" />';
newTd1.innerText = "第" + NO + "行";
newTd2.innerHTML = '<input type="text" id="Text' + NO + '" />';
} 
</script>
<body>
<form id="form1" runat="server">
<input type="button" value="插入行" onclick="addRow()" />
<table width="399" border="0" cellspacing="1" id="table" style="font-size: 14px;">
<tr bgcolor="#FFEFD5">
<td width="6%">
<input type="checkbox" id="box1" />
</td>
<td>
第1行
</td>
<td>
<input id="Text1" type="text" />
</td>
</tr>
</table>
</form>
</body>