When I was interviewing the front end before, I encountered an interview question. I didn’t have any thoughts at that time so I didn’t answer it. Today I sorted out and shared it with you:
The original question is: Use the object method to create a 2x2 table, requiring a button in the second row and second column cell. When clicking this button, the value of the first row and the value of the first column of the second row and the value of the first column of the second row, see the figure below
Create a table
Click effect
I am stupid. If you have a better way, please tell me. I have thought about it for a long time and finally got some results:
1. Create a table object
The code copy 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 tables using objects</h2>
<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 table to 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 effect of creating a table method is:
Click to switch code:
The code copy is 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;
}
Clicking the toggle button effect is:
Extension:
1. I want to click id/name/sex to change the sorting:
original
Effect
Code:
The code copy is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<th colspan="3">Click to 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>Female</td>
</tr>
</table>
<script>
//Binding effect---I'm invalid
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 the row element
var row1=table.rows[2];
var row2=table.rows[3];
//Method 1
//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 2
//I don't understand... The following sentence can be realized
//table.appendChild(row1);
}
</script>
<br>
</body>
</html>