JavaScript dynamically creates tables: new, deleted rows and columns

Reprint: http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html

There are two formats for dynamically creating tables using JS, AppendChild () and InsertRow, InsertCell (). Two ways in fact, but the first one is likely to have problems on IE, so we recommend that you use the second kind, directly say it.

1, Inserrow () and Insertcell () functions

The InsertRow () function can take parameters in the following form:

InsertRow (Index): Index starting from 0

This function adds a new row to the row of index, such as InsertRow (0), before adding a new row to the first row. The default InsertRow () function is equivalent to InsertRow (-1), adding a new row to the end of the table. Generally we are in use: Objtable.insertrow (objTable.rows.length). That is, for the table objtable the last new row.

InsertCell () and insertrow are used the same way, this is no longer said.

2, DeleteRow () and Deletecell () methods

The DeleteRow () function can take parameters in the following form: DeleteRow (Index): Index starting from 0

The meaning of the above two methods is to delete the rows and cells at the specified position. Parameters to pass in: index is the position of the row in the table and can be obtained and then removed by the following method:

var Row=document.getelementbyid ("Row id");
var index=row.rowindex;//has this attribute, hehe
Objtable.deleterow (index);
Alternatively, the document.getElementById ("Row ID") can also be used. RemoveNode (); To delete

In the use of the process I encountered a question to tell you, is to delete the table row, if you delete a row, then the table row number is immediately change, so if you want to delete all rows of the table, the following code is wrong:

function Clearrow () {
objtable= document.getElementById ("myTable");

for (var i=1; i<objtable.rows.length; i++)
{
Tblobj.deleterow (i);
}
}

There are two problems with this code to delete the original table body. The first one cannot be deleterow (i), which should be deleterow (1). Because when the table row is deleted, the number of rows in the table is changing, which is the key to the problem, Rows.length is always smaller, the number of rows deleted will always be less than expected, so the correct way to delete the table row code should be:

function Clearrow () {
objtable= document.getElementById ("myTable");
var length= objTable.rows.length;
for (var i=1; i<length; i++)
{
Objtable.deleterow (i);
}
}

3. Dynamically set the properties of cells and rows

A, using the SetAttribute () method, the format is as follows: SetAttribute (attribute, attribute value)

Description: This method almost all DOM objects can be used, the first parameter is the name of the property, for example: border, the second is the value you want to set for the border, such as: 1

var objmytable = document.getElementById ("myTable");

Objmytable.setattribute ("Border", 1);//Set Border to 1 for table

For example, if you want to set a height for a TD, Get the TD object First, and then use the SetAttribute () method

var Objcell = document.getElementById ("MyCell");

Objcell.setattribute ("height", 24);//Set the height of the cell to 24

In the use of the time encountered a set style problem, can not use setattribute ("Class", "Inputbox2"), but should use SetAttribute ("ClassName", "Inputbox2"), hehe, Other I guess also have the same problem, some properties and we in the DW in the inconsistency, hehe, we explore it.

B, Direct Assignment

var objmytable = document.getElementById ("myTable");

objmytable.border=1;//set the border to 1 for a table

This method also all applies, hehe.

4. Create a table

Learn about row <tr> and cell <td> additions and deletions so you can create a table.

The first step: you need to have a table that you go to dynamically change, I'm talking about the table that already exists the page, we want to set up a id:mytable

var objmytable = document.getElementById ("myTable");

Step Two: Create rows and columns of objects

var index = objmytable.rows.length-1;
var nextRow = objmytable.insertrow (index);//To add a new line, I'll start with the second line from the bottom.

Cell box Number
var Newcellcartonno = Nextrow.insertcell ();
var cartonnoname = "Iptcartonno";
newcellcartonno.innerhtml = "&nbsp;<input type= ' text ' size= ' 5 ' name=" +cartonnoname+ "id=" +cartonNoName+ "value = ' > ';
Newcellcartonno.setattribute ("ClassName", "Tablerdd");

This is done, you can simply create a row and a column. The specific code I posted below. Just a very simple example, but the method is probably the above, oh, slowly groping it ~

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Blu-ray-blueshine</title>
<script language= "JavaScript" >
var count=false,no=1;
function AddRow () {
count=! Count;
Add a row
var newtr = Testtbl.insertrow (testTbl.rows.length);
Add two columns
var newTd0 = Newtr.insertcell ();
var newTd1 = Newtr.insertcell ();
var newTd2 = Newtr.insertcell ();
Set column contents and properties
if (Count) {newtr.style.background= "#FFE1FF";}
else {newtr.style.background= "#FFEFD5";}
newtd0.innerhtml = ' <input type=checkbox id= ' box4 ' > ';
no++
Newtd1.innertext= "First" + no+ "line";
}
</script>

<body>
<table width= "399" border=0 cellspacing= "1" id= "Testtbl" style= "FONT-SIZE:14PX;" >
<tr bgcolor= "#FFEFD5" >
&LT;TD width=6%><input type=checkbox id= "Box1" ></td>
&LT;TD > 1th Line </td>
&LT;TD > </td>
</tr>
</table>
<label>
<input type= "button" value= "Insert Row" onclick= "AddRow ()"/>
</label>
</body>



5. AppendChild () method

I put the code directly, we go to research, time tight, haha, forgive ~

<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>
<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" onclick= "AddTextbox (this.form,this.parentnode)"/>
<input type= "button" value= "Remove Textbox" onclick= "Removetextbox (this.form)"/>
</p>
<p><input type= "Submit" value= "Submit"/></p>
</form>
</body>

<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>
<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" onclick= "AddTextbox (this.form,this.parentnode)"/>
<input type= "button" value= "Remove Textbox" onclick= "Removetextbox (this.form)"/>
</p>
<p><input type= "Submit" value= "Submit"/></p>
</form>
</body>

JavaScript dynamically creates tables: new, deleted rows and columns