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>

其所用项目由Asp.Net技术开发，仍然使用的Webform作为前端处理，但某些功能包含了jQuery的功能，他遇到的问题就是无论用IE还是Firefox，包含jQuery的那部分页面功能都无法正常使用。搜索Google后，结果可以归纳为>>>详细阅读

本文标题：JavaScript 学习笔记（十三）Dom创建表格

地址：http://www.17bianji.com/kaifa2/JS/27204.html

1/2 1