// Js automatically generates the source code of the input table based on the number of rows and columns
<! 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 = UTF-8"/>
<Title> automatically create a table </title>
<Style type = "text/css">
Table {
Width: 300px;
Height: 100px;
Border: #0C9 1px solid;
Border-collapse: collapse;
}
</Style>
<Script type = "text/javascript" language = "javascript">
Function autocreate (){
// Create a table
Var table = document. createElement ("table ");
Table. setAttribute ("border", "1 ");
Table. setAttribute ("background", "red ");
// Obtain the row Value
Var line = document. getElementById ("line"). value;
// Obtain the column Value
Var list = document. getElementById ("list"). value;
For (var I = 0; I <= line; I ++ ){
// Alert (line );
// Create tr
Var tr = document. createElement ("tr ");
For (var j = 0; j <= list; j ++ ){
// Alert (list );
// Create td
Var td = document. createElement ("td ");
Tr. appendChild (td );
}
Table. appendChild (tr );
}
Document. getElementById ("d1"). appendChild (table );
}
</Script>
</Head>
<Body>
<Input type = "text" id = "line"> Number of rows
<Input type = "text" id = "list"> Number of Columns
<Input type = "button" value = "Add Table" onclick = "autocreate ()">
<Div id = "d1" style = "height: 400px; width: 300px;"> </div>
</Body>
</Html>
From xweina's column