管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

JavaScript 学习笔记（十三）Dom创建表格

　　Dom基础—创建表格

　　利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。但第一种有可能在IE上有问题，所以推荐使用第二种。

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

　　这个函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于 insertRow(-1)，将新行添加到表的最后。一般我们在使用的时候都是：

　　objTable.insertRow (objTable.rows.length)就是为表格objTable在最后新增一行。

　　insertCell()和insertRow的用法相同。

　　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);

　　}

　　}

　　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>

教程首页 更多教程