Before the interview front end, encountered an interview problem, there was no thought so did not answer out, today organized a bit and everyone share under:
The original title is: Use the object method to create a 2x2 table (table), the second row of second column in the cell has a button, when clicked This button, the first row of the first column value and the second row of the value of the first column interchange, see the following figure
Create a table
Click Effect
I am dull, if you have a better way to tell in the next, I pondered the half day finally have some results:
1. Create a Table object
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<style>
Table Td{text-align:center;}
</style>
<body>
<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 a 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 ();
}
Creating columns
for (Var i=0;i<this.cell;i++) {
Table.rows[i].insertcell ();
Table.rows[i].insertcell ();
}
Add a 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>
The effect of creating a table method implementation is:
Click on the switch code:
Copy Code code as follows:
function Qiehuan () {
Get table
var table=document.getelementsbytagname ("table") [0];
Get TR
var row1=table.rows[0];
var row2=table.rows[1];
Exchange Content
Create new elements to store data
var a=row1.cells[0].innerhtml;
var b=row2.cells[0].innerhtml;
Row1.cells[0].innerhtml=b;
Row2.cells[0].innerhtml=a;
}
Click on the toggle button effect:
Expansion extension:
1. I want to implement click Id/name/sex to replace the sort:
Original
Effect
Code
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<body>
<table border= "1" width= ">"
<th colspan= "3" > Click Replace Content </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> Women </td>
</tr>
</table>
<script>
Binding Effect---IE failure
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 () {
Get table
var table=document.getelementsbytagname ("table") [0];
Get row element
var row1=table.rows[2];
var row2=table.rows[3];
Method One
Create new elements 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 Two
Don't understand.... The following sentence will be achieved
Table.appendchild (ROW1);
}
</script>
<br>
</body>
