提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

JavaScript笔记学习 dom 十三 创建表格
2023-06-13 09:14:15 时间
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是行在表格中的位置，可以下面的方法取得然后去删除：
varrow=document.getElementById("行的Id");
varindex=row.rowIndex;//有这个属性
objTable.deleteRow(index);
在使用过程中，删除表格的行的时候，如果删除了某一行，那么表格行数是马上就变化的，rows.length总是在变小，所以如果你要删除表格的所有行：
复制代码代码如下:

functionremoveAllRow(){
varobjTable=document.getElementById("myTable");
varlength=objTable.rows.length;
for(vari=1;i<length;i++){
objTable.deleteRow(i);
}
}

3、setAttribute()方法,动态设置单元格与行的属性
格式如下：setAttribute(属性，属性值)
varobjMyTable=document.getElementById("myTable");
objMyTable.setAttribute("border",1);//为表格设置边框为1
在使用的时候遇到一个设置样式的问题，不能用
setAttribute("class","inputbox1");而应该使用
setAttribute("className","inputbox1")，
4、创建表格
了解了行<tr>与单元格<td>的增删那就可以创建表格了。
第一步：你需要有一个你去动态变化的表格，这里讲的是已经存在页面的表格,我们设置一个id：myTable
　　varobjMyTable=document.getElementById("myTable");
第二步：创建行与列的对象
复制代码代码如下:

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

下面是示例代码
复制代码代码如下:
<scripttype="text/javascript">
varCount=false;//控制交替换行
varNO=1;//行号
functionaddRow(){
Count=!Count;
//添加一行
varnewTr=table.insertRow(table.rows.length);//在最后新增一行
//varnewTr=table.insertRow(0);//在最前面新增一行
//添加两列
varnewTd0=newTr.insertCell();
varnewTd1=newTr.insertCell();
varnewTd2=newTr.insertCell();
//设置列内容和属性
if(Count){
newTr.style.background="#FFE1FF";
}
else{
newTr.style.background="#FFEFD5";
}
NO++;
newTd0.innerHTML="<inputtype=checkboxid="box"+NO+""/>";
newTd1.innerText="第"+NO+"行";
newTd2.innerHTML="<inputtype="text"id="Text"+NO+""/>";
}
</script>
<body>
<formid="form1"runat="server">
<inputtype="button"value="插入行"onclick="addRow()"/>
<tablewidth="399"border="0"cellspacing="1"id="table"style="font-size:14px;">
<trbgcolor="#FFEFD5">
<tdwidth="6%">
<inputtype="checkbox"id="box1"/>
</td>
<td>
第1行
</td>
<td>
<inputid="Text1"type="text"/>
</td>
</tr>
</table>
</form>
</body>

相关文章