Objectives:Generate a 2000*5 table. The content of each cell is the row number, comma, and column number.
Method 1: Use createelement to generate a table, use insertrow and insertcell to generate rows and columns, and use innerhtml to populate the content of cells.
Method 2: Use createelement to generate a table and createelement to generate rows and columns. The content of the cell is filled with the createtextnode method.
Method 3: concatenate a string in the innerhtml attribute of the table and use the string plus = Operator to link the string.
Method 4: concatenate the string of the innerhtml attribute of the table, append each string to the array, and call the join method of the array to generate the target string.
Method |
Run Time (MS) |
Method 1 |
93037 |
Method 2 |
3341 |
Method 3 |
2795 |
Method 4 |
500 |
<HTML>
<Head>
<Title> test page </title>
<SCRIPT type = 'text/JavaScript '>
<! --
Function createtable (){
VaR T = Document. createelement ('table ');
For (VAR I = 0; I <2000; I ++ ){
VaR r = T. insertrow ();
For (var j = 0; j <5; j ++ ){
VaR c = R. insertcell ();
C. innerhtml = I + ',' + J;
}
}
Document. getelementbyid ('table1'). appendchild (t );
T. setattribute ('border', '1 ');
}
Function createtable2 (){
VaR T = Document. createelement ('table ');
VaR B = Document. createelement ('tbody ');
For (VAR I = 0; I <2000; I ++ ){
VaR r = Document. createelement ('tr ');
For (var j = 0; j <5; j ++ ){
VaR c = Document. createelement ('td ');
VaR M = Document. createtextnode (I + ',' + J );
C. appendchild (m );
R. appendchild (C );
}
B. appendchild (R );
}
T. appendchild (B );
Document. getelementbyid ('table1'). appendchild (t );
T. setattribute ('border', '1 ');
}
Function createtable3 (){
VaR DATA = '';
Data + = '<Table border = 1> <tbody> ';
For (VAR I = 0; I <2000; I ++ ){
Data + = '<tr> ';
For (var j = 0; j <5; j ++ ){
Data + = '<TD>' + I + ',' + J + '</TD> ';
}
Data + = '</tr> ';
}
Data + = '</tbody> <Table> ';
Document. getelementbyid ('table1'). innerhtml = data;
}
function createtable4 () {
var DATA = new array ();
data. push ('
'); for (VAR I = 0; I <2000; I ++) { data. push ('
'); for (var j = 0; j <5; j ++) { data. push ('
' + I + ',' + J + ' | '); }< br> data. push ('
'); }< br> data. push ('
'); document. getelementbyid ('table1 '). innerhtml = data. join (''); }
Function showfunctionruntime (f ){
VaR T1 = new date ();
F ();
VaR t2 = new date ();
Alert (T2-t1 );
}
// -->
</SCRIPT>
</Head>
<Body>
<Div id = "Table1" style = "border: 1px solid black">
</Div>
<SCRIPT>
Showfunctionruntime (createtable );
Showfunctionruntime (createtable2 );
Showfunctionruntime (createtable3 );
Showfunctionruntime (createtable4 );
</SCRIPT>
</Body>
</Html>