Cuando estaba entrevistando a la parte delantera antes, encontré una pregunta de entrevista. No tenía ninguna idea en ese momento, así que no lo respondí. Hoy lo resolví y lo compartí contigo:
La pregunta original es: use el método de objeto para crear una tabla 2x2, que requiere un botón en la segunda fila y la celda de la segunda columna. Al hacer clic en este botón, el valor de la primera fila y el valor de la primera columna de la segunda fila y el valor de la primera columna de la segunda fila, vea la figura a continuación
Crear una mesa
Haga clic en Efecto
Soy estúpido. Si tiene una mejor manera, por favor dígame. Lo he pensado durante mucho tiempo y finalmente obtuve algunos resultados:
1. Crea un objeto de tabla
La copia del código es la siguiente:
<! Doctype html>
<html lang = "en">
<Evista>
<meta charset = "utf-8">
<title> documento </title>
<estilo>
Tabla TD {Text-Align: Center;}
</style>
</ablo>
<Body>
<h2> Crear tablas usando objetos </h2>
<script>
table var = {
valor1: "valor1",
valor2: "valor2",
Fila: 2,
Célula: 2,
create: function () {
// crear una tabla
var tabla = document.createElement ("tabla");
table.border = 1;
table.width = "500";
// Crear botón
var button = document.createElement ("botón");
Button.innerhtml = "Switch";
Button.name = "Qiehuan";
Button.SetAttribute ("onClick", "qiehuan ()");
// crear una fila
para (var i = 0; i <this.row; i ++) {
table.insertrow ();
}
// crear una columna
para (var i = 0; i <this.cell; i ++) {
table.rows [i] .insertcell ();
table.rows [i] .insertcell ();
}
// Agregar mesa al cuerpo
document.body.appendChild (tabla);
var tabla = document.getElementsBytagName ("Tabla") [0];
var fila1 = table.rows [0];
var row2 = table.rows [1];
table.rows [1] .Cells [1] .AppendChild (botón);
var a = fila1.cells [0] .innerhtml = this.value1;
var b = row2.cells [0] .innerhtml = this.value2;
}
}
table.create ();
</script>
</body>
</html>
El efecto de crear un método de tabla es:
Haga clic para cambiar el código:
La copia del código es la siguiente:
función qiehuan () {
// Obtener mesa
var tabla = document.getElementsBytagName ("Tabla") [0];
// conseguir tr
var fila1 = table.rows [0];
var row2 = table.rows [1];
// intercambiar contenido
// crear nuevos elementos para almacenar datos
var a = fila1.cells [0] .innerhtml;
var b = row2.cells [0] .innerhtml;
fila1.cells [0] .innerhtml = b;
Row2.Cells [0] .innerhtml = a;
}
Haga clic en el efecto del botón de palanca es:
Extensión:
1. Quiero hacer clic en ID/nombre/sexo para cambiar la clasificación:
original
Efecto
Código:
La copia del código es la siguiente:
<! Doctype html>
<html lang = "en">
<Evista>
<meta charset = "utf-8">
<title> documento </title>
</ablo>
<Body>
<Table>
<th colspan = "3"> Haga clic para reemplazar el contenido </th>
<tr>
<td id = "id"> id </td>
<td id = "nombre"> nombre </td>
<td> <span id = "sex"> sexo </span> </td>
</tr>
<tr>
<TD> 1 </td>
<TD> a </td>
<td> macho </td>
</tr>
<tr>
<TD> 2 </td>
<TD> B </td>
<td> femenina </td>
</tr>
</table>
<script>
// Efecto de unión --- soy inválido
document.getElementById ('id'). addEventListener ('hacer clic', f_switch, falso);
document.getElementById ('name'). AddEventListener ('Click', F_Switch, False);
document.getElementById ('Sex'). AddEventListener ('hacer clic', f_switch, falso);
función f_switch () {
// Obtener mesa
var tabla = document.getElementsBytagName ("Tabla") [0];
// Obtener el elemento de fila
var fila1 = table.rows [2];
var fila2 = table.rows [3];
// Método 1
// crear nuevos elementos para almacenar datos
var newRow = document.createElement ("tr");
var newhtml = newRow.innerhtml = row2.innerhtml;
var newRow2 = document.createElement ("tr");
var newhtml2 = newRow2.innerhtml = row1.innerhtml;
//reemplazar
fila1.innerhtml = newhtml;
row2.innerhtml = newhtml2;
// Método 2
// No entiendo ... la siguiente oración se puede realizar
//table.appendchild(row1);
}
</script>
<br>
</body>
</html>