利用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<objTable.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; i<length; i++ ) { objTable.deleteRow(i); } }
3、动态设置单元格与行的属性
A、采用setAttribute()方法,格式如下:setAttribute(属性,属性值)
说明:这个方法几乎所有的DOM对象都可以使用,第一个参数是属性的名称,比如说:border,第二个就是你要为border设置的值了,比如:1
var objMyTable = document.getElementById("myTable");
objMyTable.setAttribute("border",1);//为表格设置边框为1
其他的比如你要为一个TD设置高度,同样先取得这个TD对象,然后使用setAttribute()方法
var objCell = document.getElementById("myCell");
objCell.setAttribute("height",24);//为单元格设置高度为24
在使用的时候遇到一个设置样式的问题,不能用setAttribute("class","inputbox2");而应该使用setAttribute("className","inputbox2"),呵呵,其他我估计也有同样的问题,有些属性和我们在DW里面的不一致,呵呵,大家自己摸索吧。
B、直接赋值
var objMyTable = document.getElementById("myTable");
objMyTable.border=1;//为表格设置边框为1
这个方法也全部适用,呵呵。
4、创建表格
了解了行<tr>与单元格<td>的增删那就可以创建表格了。
第一步:你需要有一个你去动态变化的表格,我这里讲的是已经存在页面的表格,我们要设置一个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 = " <input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>"; newCellCartonNo.setAttribute("className","tablerdd");
这样就搞定了,可以简单的创建一个行和列了。具体的代码我贴在下面。只是很简单的例子,不过方法就大概是上面的了,呵呵,慢慢摸索吧~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"> <html xmlns="
http://www.w3.org/1999/xhtml
"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>
蓝光
-BlueShine</title> <script language="JavaScript"> var 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 = '<input type=checkbox id="box4">'; NO++ newTd1.innerText="第"+ NO+"行
"; } </script> </head>
<body> <table width="399" border=0 cellspacing="1" id="testTbl" style="font-size:14px;" > <tr bgcolor="#FFEFD5"> <td width=6%><input type=checkbox id="box1"></td> <td >第1行
</td> <td > </td> </tr> </table> <label> <input type="button" value="插入行
" οnclick="addRow()" /> </label> </body> </html>
5、appendChild()方法
我就直接贴代码了,大家去研究,时间紧,哈哈,见谅~
<html> <head> <title>My Test Page</title> <script type="text/javascript"> <!-- var textNumber = 1; function addTextBox(form, afterElement) { // Increment the textbox number textNumber++; // Create the label var label = document.createElement("label"); // Create the textbox var textField = document.createElement("input"); textField.setAttribute("type","text"); textField.setAttribute("name","txt"+textNumber); textField.setAttribute("id","txt"+textNumber); // Add the label's text label.appendChild(document.createTextNode("Text Box #"+textNumber+": ")); // Put the textbox inside label.appendChild(textField); // Add it all to the form form.insertBefore(label,afterElement); return false; } function removeTextBox(form) { if (textNumber > 1) { // If there's more than one text box // Remove the last one added form.removeChild(document.getElementById("txt"+textNumber).parentNode); textNumber--; } } //--> </script> <style type="text/css"> <!-- label { display:block; margin:.25em 0em; } --> </style> </head> <body> <form id="myForm" method="get" action="./" /> <label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label> <p> <input type="button" value="Add Textbox" οnclick="addTextBox(this.form,this.parentNode)" /> <input type="button" value="Remove Textbox" οnclick="removeTextBox(this.form)" /> </p> <p><input type="Submit" value="Submit" /></p> </form> </body> </html>
<html> <head> <title>My Test Page</title> <script type="text/javascript"> <!-- var textNumber = 1; function addTextBox(form, afterElement) { // Increment the textbox number textNumber++; // Create the label var label = document.createElement("label"); // Create the textbox var textField = document.createElement("input"); textField.setAttribute("type","text"); textField.setAttribute("name","txt"+textNumber); textField.setAttribute("id","txt"+textNumber); // Add the label's text label.appendChild(document.createTextNode("Text Box #"+textNumber+": ")); // Put the textbox inside label.appendChild(textField); // Add it all to the form form.insertBefore(label,afterElement); return false; } function removeTextBox(form) { if (textNumber > 1) { // If there's more than one text box // Remove the last one added form.removeChild(document.getElementById("txt"+textNumber).parentNode); textNumber--; } } //--> </script> <style type="text/css"> <!-- label { display:block; margin:.25em 0em; } --> </style> </head> <body> <form id="myForm" method="get" action="./" /> <label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label> <p> <input type="button" value="Add Textbox" οnclick="addTextBox(this.form,this.parentNode)" /> <input type="button" value="Remove Textbox" οnclick="removeTextBox(this.form)" /> </p> <p><input type="Submit" value="Submit" /></p> </form> </body> </html>