Home > Developer > JavaScript
Javascript implements switching between values in td, and javascript switches to td
I encountered an interview question before the interview. I didn't answer it because I had no thoughts at the time. Today I sorted it out and shared it with you:
The original question is: using the object method to create a 2x2 table requires a button in the cell column 2 in the second row. When you click this button, the values in the first column of the First row are exchanged with those in the first column of the Second row. See
Create a table
Click Effect
I am dull. If you have a better way to tell me, I have finally come up with some results after pondering for a long time:
1. Create a table object
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> Document </title>
<Style>
Table td {text-align: center ;}
</Style>
</Head>
<Body>
<H2> Create a table using an object <Script>
Var table = {
Value1: "value1 ",
Value2: "value2 ",
Row: 2,
Cell: 2,
Create: function (){
// Create a table
Var table = document. createElement ("table ");
Table. border = 1;
Table.width = "500 ";
// Create button
Var button = document. createElement ("button ");
Button. innerHTML = "Switch ";
Button. name = "qiehuan ";
Button. setAttribute ("onclick", "qiehuan ()");
// Create a row
For (var I = 0; I <this. row; I ++ ){
Table. insertRow ();
}
// Create a column
For (var I = 0; I <this. cell; I ++ ){
Table. rows [I]. insertCell ();
Table. rows [I]. insertCell ();
}
// Add the table to the body
Document. body. appendChild (table );
Var table = document. getElementsByTagName ("table") [0];
Var row1 = table. rows [0];
Var row2 = table. rows [1];
Table. rows [1]. cells [1]. appendChild (button );
Var a = row1.cells [0]. innerHTML = this. value1;
Var B = row2.cells [0]. innerHTML = this. value2;
}
}
Table. create ();
</Script>
</Body>
</Html>
The table creation method is as follows:
Click to switch code:
Copy codeThe Code is as follows:
Function qiehuan (){
// Obtain the table
Var table = document. getElementsByTagName ("table") [0];
// Obtain tr
Var row1 = table. rows [0];
Var row2 = table. rows [1];
// Exchange Content
// Create a new element to store data
Var a = row1.cells [0]. innerHTML;
Var B = row2.cells [0]. innerHTML;
Row1.cells [0]. innerHTML = B;
Row2.cells [0]. innerHTML =;
}
Click the switch button:
Extension:
1. I want to change the order by clicking id/name/sex:
Original
Effect
Code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> Document </title>
</Head>
<Body>
<Table border = "1" width = "500">
<Th colspan = "3"> click to replace </th>
<Tr>
<Td id = "id"> id </td>
<Td id = "name"> name </td>
<Td> <span id = "sex"> sex </span> </td>
</Tr>
<Tr>
<Td> 1 </td>
<Td> a </td>
<Td> male </td>
</Tr>
<Tr>
<Td> 2 </td>
<Td> B </td>
<Td> female </td>
</Tr>
</Table>
<Script>
// Binding effect --- failure under ie
Document. getElementById ('id'). addEventListener ('click', f_switch, false );
Document. getElementById ('name'). addEventListener ('click', f_switch, false );
Document. getElementById ('sex'). addEventListener ('click', f_switch, false );
Function f_switch (){
// Obtain the table
Var table = document. getElementsByTagName ("table") [0];
// Obtain the Row Element
Var row1 = table. rows [2];
Var row2 = table. rows [3];
// Method 1
// Create a new element to store data
Var newrow = document. createElement ("tr ");
Var newhtml = newrow. innerHTML = row2.innerHTML;
Var newrow2 = document. createElement ("tr ");
Var newhtml2 = newrow2.innerHTML = row1.innerHTML;
// Replace
Row1.innerHTML = newhtml;
Row2.innerHTML = newhtml2;
// Method 2
// Do not understand... the following sentence can be implemented
// Table. appendChild (row1 );
}
</Script>
<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
