Javascript sort table & merge Same Column

Note:
Appendchild ()
My test results:
1 after all rows in the appendchild () Table move up one row cyclically, the last row of the table is replaced with the new row. This is equivalent to replacing the first row of the table, move one row up cyclically
2. The total number of rows in the table is not changed.

Insertrow ()
1 insertrow () insert a row into the table, and add one to the total row of the table
2 insertrow (INDEX) Index = 0, increase in the header, Index =-1, and add at the end of the table.

Deleterow ()
1 deleterow (0) Delete the first row of the header and the second row into the first row. Therefore, delete the first n rows of the header and call deleterow (0) n times in a loop)

Example: Sort table & merge Same Column

1. Break table: traverses the table. If a TD in the sorting column contains multiple values, it must be split into multiple rows (using insertrow (-1 ); index =-1 is because the number of rows in the original table is used for traversal. If a row is inserted in the header, the traversal fails)

2. Sort table:

A. Save the sorting row in the table to the array arrayorig,
B: Sorting array arrayorig
C: traverse the array arrayorig, merge the same columns, and generate the arraydest (note that the state must be ensured during the merge process, and the attributes must meet the requirements)
D: traverse arraydest and add it to the table using appendchild.

3. Delete table: Because appendchild () does not change the number of rows in the table, the Count = arrayorig. Length-arraydest. Length loop calls deleterow (0) to delete the Count rows before the table.

Some online materials are as follows:
Http://zxjava.javaeye.com/blog/193926

1. inserrow () and insertcell () Functions

Insertrow (INDEX): Index starts from 0

This function adds a new row to the row of the index, such as insertrow (0), before the new row is added to the first row. The default insertrow () function is equivalent to insertrow (-1) and adds a new row to the end of the table. Generally, we use objtable. insertrow (objtable. Rows. Length) to add a row for the table objtable.

Insertcell () and insertrow have the same usage.

2. deleterow () and deletecell () Methods

Deleterow (INDEX): Index starts from 0

Deletes rows and cells at a specified position. The parameter to be passed in: Index is the position of the row in the table. You can obtain the parameter in the following method and delete it:

VaR ROW = Document. getelementbyid ("row_id ");
VaR Index = row. rowindex;
Objtable. deleterow (INDEX );

When you delete a row in a table, the number of rows in the table changes immediately. Therefore, if you want to delete all rows in the table, the following code is incorrect:

Function clearrow (){
Objtable = Document. getelementbyid ("mytable ");

For (VAR I = 1; I <objtable. Rows. length; I ++)
{
Tblobj. deleterow (I );
}
}

This code deletes the table body of the original table. There are two problems. First, it cannot be deleterow (I). It should be deleterow (1 ). Because the number of rows in the table is changing when the table row is deleted, this is the key to the problem, rows. length is always getting smaller, and the number of rows to be deleted is always half as expected. Therefore, the correct code for deleting rows in the table should be as follows:

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 attributes of cells and rows

A. Use the setattribute () method in the following format: setattribute (attribute, attribute value)

Note: almost all DOM objects in this method can be used. The first parameter is the attribute name, for example, border. The second parameter is the value you want to set for border, for example, 1.

VaR objmytable = Document. getelementbyid ("mytable ");

Objmytable. setattribute ("border", 1); // you can specify 1 as the border for a table.

For example, if you want to set a height for a TD object, you must first obtain the TD object and then use the setattribute () method.

VaR objcell = Document. getelementbyid ("mycell ");

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

Setattribute ("class", "inputbox2") cannot be used when setting styles. setattribute ("classname", "inputbox2") should be used instead, I guess there are the same problems with others. Some attributes are inconsistent with those in DW.

B. Direct assignment

VaR objmytable = Document. getelementbyid ("mytable ");

Objmytable. Border = 1; // you can specify 1 as the border for the table.

4. Create a table

After learning about adding and deleting rows and cells, you can create a table.

Step 1: You need to have a table that you want to dynamically change. Here I am talking about a table that already exists on the page. We need to set an ID: mytable

VaR objmytable = Document. getelementbyid ("mytable ");

Step 2: Create row and column objects

VaR Index = objmytable. Rows. Length-1;
VaR nextrow = objmytable. insertrow (INDEX); // the row to be added. Here, it is added from the last row.

VaR newcellcartonno = nextrow. insertcell ();
VaR cartonnoname = "iptcartonno ";
Newcellcartonno. innerhtml = "<input type = 'text' size = '5' name =" + cartonnoname + "id =" + cartonnoname + "value =''> ";
Newcellcartonno. setattribute ("classname", "tablerdd ");

In this way, you can simply create a row and a column. The specific code is pasted below. It's just a simple example, but the method is probably the above ~

<! 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> 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 the column content and attributes
If (count) {newtr. style. Background = "# ffe1ff ";}
Else {newtr. style. Background = "# ffefd5 ";}
Newtd0.innerhtml = '<input type = checkbox id = "box4"> ';
No ++
Newtd1.innertext = "row" + 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> row 1st </TD>
<TD> </TD>
</Tr>
</Table>
<Label>
<Input type = "button" value = "insert row" onclick = "addrow ()"/>
</Label>
</Body>
</Html>

5. appendchild () method

I directly paste the code. It's time for everyone to study it. Haha, sorry ~

<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" 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>
</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" 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>
</Html>