Quando eu estava entrevistando o front -end antes, encontrei uma pergunta de entrevista. Eu não pensava naquele momento, então não respondi. Hoje eu resolvi e compartilhei com você:
A pergunta original é: use o método do objeto para criar uma tabela 2x2, exigindo um botão na segunda linha e na segunda célula da coluna. Ao clicar neste botão, o valor da primeira linha e o valor da primeira coluna da segunda linha e o valor da primeira coluna da segunda linha, veja a figura abaixo
Crie uma tabela
Clique em efeito
Eu sou estúpido. Se você tiver uma maneira melhor, por favor me diga. Pensei nisso há muito tempo e finalmente obtive alguns resultados:
1. Crie um objeto de tabela
A cópia do código é a seguinte:
<! Doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> Documento </title>
<estilo>
Tabela TD {Text-Align: Center;}
</style>
</head>
<Body>
<H2> Crie tabelas usando objetos </h2>
<Cript>
var tabela = {
valor1: "value1",
valor2: "value2",
Linha: 2,
célula: 2,
Criar: function () {
// Crie uma tabela
var tabela = document.createElement ("tabela");
tabela.border = 1;
tabela.width = "500";
// Criar botão
var Button = document.createElement ("botão");
button.innerhtml = "switch";
button.name = "qiehuan";
Button.SetAtAttribute ("OnClick", "Qiehuan ()");
// Crie uma linha
for (var i = 0; i <this.row; i ++) {
tabela.insertrow ();
}
// Crie uma coluna
for (var i = 0; i <this.cell; i ++) {
tabela.Rows [i] .InSertCell ();
tabela.Rows [i] .InSertCell ();
}
// Adicione a tabela ao corpo
document.body.appendChild (tabela);
var tabela = document.getElementsByTagName ("tabela") [0];
var row1 = tabela.Rows [0];
var row2 = tabela.Rows [1];
tabela.Rows [1] .Cells [1] .appendChild (botão);
var a = row1.Cells [0] .innerhtml = this.value1;
var b = row2.Cells [0] .innerhtml = this.value2;
}
}
tabela.create ();
</script>
</body>
</html>
O efeito de criar um método de tabela é:
Clique para alternar o código:
A cópia do código é a seguinte:
função qiehuan () {
// Obtenha a tabela
var tabela = document.getElementsByTagName ("tabela") [0];
// obtenha tr
var row1 = tabela.Rows [0];
var row2 = tabela.Rows [1];
// Troca de conteúdo
// Crie novos elementos para armazenar dados
var a = row1.Cells [0] .innerhtml;
var b = row2.Cells [0] .innerhtml;
Row1.Cells [0] .innerhtml = b;
row2.Cells [0] .innerhtml = a;
}
Clicar no efeito do botão de alternância é:
Extensão:
1. Quero clicar em ID/Name/Sex para alterar a classificação:
original
Efeito
Código:
A cópia do código é a seguinte:
<! Doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> Documento </title>
</head>
<Body>
<tabela>
<th colspan = "3"> clique para substituir o conteúdo </th>
<tr>
<td id = "id"> id </td>
<td id = "name"> nome </td>
<td> <span id = "sexo"> sexo </span> </td>
</tr>
<tr>
<Td> 1 </td>
<td> a </td>
<Td> masculino </td>
</tr>
<tr>
<Td> 2 </td>
<Td> b </td>
<Td> feminino </td>
</tr>
</tabela>
<Cript>
// Efeito de ligação --- sou inválido
document.getElementById ('id'). addEventListener ('clique', f_switch, false);
document.getElementById ('nome'). addEventListener ('click', f_switch, false);
document.getElementById ('sexo'). addEventListener ('clique', f_switch, false);
função f_switch () {
// Obtenha a tabela
var tabela = document.getElementsByTagName ("tabela") [0];
// Obtenha o elemento da linha
var row1 = tabela.Rows [2];
var row2 = tabela.Rows [3];
// Método 1
// Crie novos elementos para armazenar dados
var newrow = document.createElement ("tr");
var newhtml = newrow.innerhtml = row2.innerhtml;
var newrow2 = document.createElement ("tr");
var newhtml2 = newrow2.innerhtml = row1.innerhtml;
//substituir
row1.innerhtml = newhtml;
row2.innerhtml = newhtml2;
// Método 2
// eu não entendo ... a seguinte frase pode ser realizada
//table.appendchild(row1);
}
</script>
<br>
</body>
</html>