[转]javascript 动态创建表格:新增、删除行和单元格

script 动态创建表格:新增、删除行和单元格 2008-03-17 10:07 这段时间写了不少脚本,感觉蛮有意思的,虽然能用脚本把效果实现出来,但是在后台服务器端获取数据的时候还是蛮麻烦的,这里仅提供效果实现的简单代码。 利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧。 1、inserRow()和insertCell()函数 insertRow()函数可以带参数,形式如下: insertRow(index):index从0开始 这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于 insertRow(-1),将新行添加到表的最后。一般我们在使用的时候都是:objTable.insertRow (objTable.rows.length).就是为表格objTable在最后新增一行。 insertCell()和insertRow的用法相同,这里就不再说了。 2、deleteRow()和deleteCell()方法 deleteRow()函数可以带参数,形式如下:deleteRow(index):index从0开始 和上面两个方法差不多的意思,就是删除指定位置的行和单元格。要传入的参数:Index是行在表格中的位置,可以下面的方法取得然后去删除: var row=document.getElementById("行的Id"); var index=row.rowIndex;//有这个属性,嘿嘿 objTable.deleteRow(index); 在使用过程中我碰到的一个问题跟大家说一下,就是删除表格的行的时候,如果你删除了某一行,那么表格行数是马上就变化的,所以如果你要删除表格的所有行,下面的代码是错误的: function clearRow(){ objTable= document.getElementById("myTable"); for( var i=1; i与单元格的增删那就可以创建表格了。 第一步:你需要有一个你去动态变化的表格,我这里讲的是已经存在页面的表格,我们要设置一个id:myTable var objMyTable = document.getElementById("myTable"); 第二步:创建行与列的对象 var index = objMyTable.rows.length-1; var nextRow = objMyTable.insertRow(index);//要新增的行,我这里是从倒数第二行开始新增的 //单元格箱号 var newCellCartonNo = nextRow.insertCell(); var cartonNoName = "IptCartonNo"; newCellCartonNo.innerHTML = " "; newCellCartonNo.setAttribute("className","tablerdd"); 这样就搞定了,可以简单的创建一个行和列了。具体的代码我贴在下面。只是很简单的例子,不过方法就大概是上面的了,呵呵,慢慢摸索吧~ 蓝光-BlueShine
第1行
5、appendChild()方法 我就直接贴代码了,大家去研究,时间紧,哈哈,见谅~ My Test Page

My Test Page

posted on 2008-04-16 17:08 top15from_old1 阅读(...) 评论(...) 编辑 收藏

导航

公告

随州简爱保罗定制衣柜专卖店为您准备了全套家装所需的定制家具,用工厂直销的价格和衣柜行业领导品牌的实力恭候您的光临。 随州市清河路清河丽景大门右侧18307228966 0722-3594778