《javascript动态创建表格.doc》由会员分享，可在线阅读，更多相关《javascript动态创建表格.doc（5页珍藏版）》请在三一文库上搜索。
1、javascript动态创建表格：新增、删除行和单元格利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。两种方式其实差不多，但第一种有可能在IE上有问题，所以推荐大家使用第二种了，直接说吧。利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。两种方式其实差不多，但第一种有可能在IE上有问题，所以推荐大家使用第二种了，直接说吧。1、inserRow()和insertCell()函数insertRow()函数可以带参数，形式如下：insertRow(index)：index从0开始这个
2、函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1)，将新行添加到表的最后。一般我们在使用的时候都是：objTable.insertRow(objTable.rows.length).就是为表格objTable在最后新增一行。insertCell()和insertRow的用法相同，这里就不再说了。2、deleteRow()和deleteCell()方法deleteRow()函数可以带参数，形式如下：deleteRow(index)：index从0开始和上面两个方法差不多的意思，就是删除指定
3、位置的行和单元格。要传入的参数：Index是行在表格中的位置，可以下面的方法取得然后去删除：var row=document.getElementById(行的Id);var index=row.rowIndex;/有这个属性，嘿嘿objTable.deleteRow(index);在使用过程中我碰到的一个问题跟大家说一下，就是删除表格的行的时候，如果你删除了某一行，那么表格行数是马上就变化的，所以如果你要删除表格的所有行，下面的代码是错误的：function clearRow()objTable= document.getElementById(myTable);for( var i=1;
4、iobjTable.rows.length ; i+ )tblObj.deleteRow(i);这段代码要删除原来的表格的表体，有两个问题。首先不能是deleteRow(i)，应该是deleteRow(1)。因为在删除表格行的时候，表格的行数在变化，这就是问题的关键，rows.length总是在变小，删除的行数总是会比预想的要少一半，所以正确的删除表格的行的代码应该这样：function clearRow()objTable= document.getElementById(myTable);var length= objTable.rows.length ;for( var i=1; ile
5、ngth; i+ )objTable.deleteRow(i);3、动态设置单元格与行的属性A、采用setAttribute()方法，格式如下：setAttribute(属性，属性值)说明：这个方法几乎所有的DOM对象都可以使用，第一个参数是属性的名称，比如说：border，第二个就是你要为border设置的值了，比如：1var objMyTable = document.getElementById(myTable);objMyTable.setAttribute(border,1);/为表格设置边框为1其他的比如你要为一个TD设置高度，同样先取得这个TD对象，然后使用setAttribut
6、e()方法var objCell = document.getElementById(myCell);objCell.setAttribute(height,24);/为单元格设置高度为24在使用的时候遇到一个设置样式的问题，不能用setAttribute(class,inputbox2);而应该使用setAttribute(className,inputbox2)，呵呵，其他我估计也有同样的问题，有些属性和我们在DW里面的不一致，呵呵，大家自己摸索吧。B、直接赋值var objMyTable = document.getElementById(myTable);objMyTable.bord
7、er=1;/为表格设置边框为1这个方法也全部适用，呵呵。4、创建表格了解了行与单元格的增删那就可以创建表格了。第一步：你需要有一个你去动态变化的表格，我这里讲的是已经存在页面的表格，我们要设置一个id:myTablevar objMyTable = document.getElementById(myTable);第二步：创建行与列的对象var index = objMyTable.rows.length-1;var nextRow = objMyTable.insertRow(index);/要新增的行，我这里是从倒数第二行开始新增的/单元格箱号var newCellCartonNo = n
8、extRow.insertCell();var cartonNoName = IptCartonNo;newCellCartonNo.innerHTML = ;newCellCartonNo.setAttribute(className,tablerdd);这样就搞定了，可以简单的创建一个行和列了。具体的代码我贴在下面。只是很简单的例子，不过方法就大概是上面的了，呵呵，慢慢摸索吧蓝光-BlueShinevar Count=false,NO=1;function addRow()Count=!Count;/添加一行var newTr = testTbl.insertRow(testTbl.rows.length);/添加两列var newTd0 = newTr.insertCell();var newTd1 = newTr.insertCell();var newTd2 = newTr.insertCell();/设置列内容和属性if(Count)newTr.style.background=#FFE1FF;else newTr.style.background=#FFEFD5;newTd0.innerHTML = ;NO+newTd1.innerText=第+ NO+行;第1行