源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JavaScript 学习笔记(十三)Dom创建表格

  • 时间:2021-01-23 03:26 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要: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总是在变小,所以如果你要删除表格的所有行:
[u]复制代码[/u] 代码如下:
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"); 第二步:创建行与列的对象
[u]复制代码[/u] 代码如下:
var index = objMyTable.rows.length; var nextRow = objMyTable.insertRow(index); //在最后的行 //var nextRow = objMyTable.insertRow(0); //在最前的行
下面是示例代码
[u]复制代码[/u] 代码如下:
<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>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部