Home > Developer > JavaScript
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = GB18030">
<Title> Insert title here </title>
<Style type = "text/css">
Input [type = text] {
Width: 30px;
}
</Style>
<Script type = "text/javascript">
/*
* Operations on tables in javascript: Create a table, delete a row, delete a column, and exchange a row.
*/
Function creatTable (){
// Obtain the original table on the page
Var oldTable = document. getElementsByTagName ("table") [0];
If (oldTable! = Null)
Document. body. removeChild (oldTable );
// Obtain the number of rows and columns
Var rows = document. getElementById ("creatRows"). value;
Var cols = document. getElementById ("creatCols"). value;
Document. getElementById ("creatRows"). value = "";
Document. getElementById ("creatCols"). value = "";
// Create a Table label and set attributes
Var table = document. createElement ("table ");
Table. setAttribute ("border", "1 ");
Table. setAttribute ("align", "center ");
Table. setAttribute ("width", "50% ");
Table. setAttribute ("cellpadding", "5 ");
Table. setAttribute ("cellspacing", "0 ");
// Alert (table );
// Create a Tbody and add it to the table
Var tbody = document. createElement ("tbody ");
Table. appendChild (tbody );
For (var I = 1; I <= rows; I ++ ){
// Create a tr and add it to the tbody
Var tr = document. createElement ("tr ");
Tbody. appendChild (tr );
For (var j = 1; j <= cols; j ++ ){
// Create a td, set the text of the td, and add it to the tr
Var td = document. createElement ("td ");
Td. innerHTML = I + "," + j;
Tr. appendChild (td );
}
}
// Load the table into the body
Document. body. appendChild (table );
}
Function deleteRow (){
// Obtain the row number
Var rows = document. getElementById ("deleteRows"). value;
Document. getElementById ("deleteRows"). value = "";
// Obtain the tr to be deleted on the page. If the tr does not exist, a message is displayed.
Var tr = document. getElementsByTagName ("tr") [rows-1];
If (tr = null ){
Alert ("the object to be deleted does not exist! ");
Return;
}
// Delete tr
Tr. parentNode. removeChild (tr );
}
Function deleteCol (){
// Obtain the number of columns to be deleted. After deletion, clear the text value.
Var cols = document. getElementById ("deleteCows"). value;
Document. getElementById ("deleteCows"). value = "";
// Retrieve all tr and delete the cols column in each tr
Var trARR = document. getElementsByTagName ("tr ");
For (var I = 0; I <trARR. length; I ++ ){
Var td = trARR [I]. childNodes [cols-1];
TrARR [I]. removeChild (td );
}
}
Function swapRow (){
// Obtain the row number to be swapped
Var row1 = document. getElementById ("swapRow1"). value;
Var row2 = document. getElementById ("swapRow2"). value;
Document. getElementById ("swapRow1"). value = "";
Document. getElementById ("swapRow2"). value = "";
// Obtain the tr to be switched
Var trArr = document. getElementsByTagName ("tr ");
Var tr1 = trArr [row1-1];
Var tr2 = trArr [row2-1];
// Exchange method written in javascript
// Tr1.swapNode (tr2 );
Var cloneTr = tr1.cloneNode (true); // The switch location. The switch fails. After the replacement, one row is missing.
Tr2.parentNode. replaceChild (cloneTr, tr2 );//???
Tr1.parentNode. replaceChild (tr2, tr1 );
}
Function swapCol (){
// Obtain the column number to be exchanged
Var cols1 = document. getElementById ("swapCol1"). value;
Var cols2 = document. getElementById ("swapCol2"). value;
Document. getElementById ("swapCol1"). value = "";
Document. getElementById ("swapCol2"). value = "";
// Obtain all TR and traverse all TR cyclically
Var trArr = document. getElementsByTagName ("tr ");
For (var x = 0; x <trArr. length; x ++ ){
// Obtain the TD to be exchanged
Var td1 = trArr [x]. childNodes [cols1-1]; // obtain all child nodes of TR
Var td2 = trArr [x]. cells [cols2-1]; // obtain all cells in TR
// Exchange
Td1.swapNode (td2 );
}
}
</Script>
</Head>
<Body>
Number of rows created: <input type = "text" id = "creatRows"> <br>
Number of columns created: <input type = "text" id = "creatCols"> <br>
<Input type = "button" value = "create table" onclick = "creatTable ()"> <br>
<Br>
Row to be deleted: <input type = "text" id = "deleteRows"> <input type = "button" value = "Delete row" onclick = "deleteRow () "> <br>
Column to be deleted: <input type = "text" id = "deleteCows"> <input type = "button" value = "delete column" onclick = "deleteCol () "> <br>
<Br>
The row to be swapped: <input type = "text" id = "swapRow1">, <input type = "text" id = "swapRow2"> <input type = "button" value = "Switch row" onclick = "swapRow ()"> <br>
Columns to be exchanged: <input type = "text" id = "swapCol1">, <input type = "text" id = "swapCol2"> <input type = "button" value = "Switch column" onclick = "swapCol ()"> <br>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
