Lorsque j'interviewais le front-end auparavant, j'ai rencontré une question d'entrevue. Je n'avais aucune pensée à ce moment-là, donc je n'y ai pas répondu. Aujourd'hui, j'ai trié et partagé avec vous:
La question d'origine est: utilisez la méthode de l'objet pour créer une table 2x2, nécessitant un bouton dans la deuxième ligne et la deuxième cellule de colonne. Lorsque vous cliquez sur ce bouton, la valeur de la première ligne et la valeur de la première colonne de la deuxième ligne et la valeur de la première colonne de la deuxième ligne, voir la figure ci-dessous
Créer une table
Cliquez sur l'effet
Je suis stupide. Si vous avez une meilleure façon, dites-moi. J'y réfléchis depuis longtemps et j'ai finalement obtenu quelques résultats:
1. Créez un objet de table
La copie de code est la suivante:
<! Doctype html>
<html lang = "en">
<adal>
<meta charset = "utf-8">
<Title> Document </Title>
<style>
Tableau TD {Text-Align: Centre;}
</ style>
</ head>
<body>
<h2> Créer des tables à l'aide d'objets </h2>
<cript>
var table = {
Value1: "Value1",
Value2: "Value2",
Rangée: 2,
Cell: 2,
create: function () {
// Créer une table
var table = document.CreateElement ("Table");
table.borter = 1;
table.width = "500";
// Créer un bouton
var bouton = document.CreateElement ("Button");
bouton.innerhtml = "commutateur";
Button.name = "Qiehuan";
Button.setAttribute ("onClick", "Qiehuan ()");
// Créer une ligne
pour (var i = 0; i <this.row; i ++) {
table.insertrow ();
}
// Créer une colonne
pour (var i = 0; i <this.cell; i ++) {
table.Rows [i] .InsertCell ();
table.Rows [i] .InsertCell ();
}
// Ajouter une table au corps
Document.Body.ApendChild (tableau);
var table = document.getElementsByTagName ("Table") [0];
var row1 = table.Rows [0];
var row2 = table.Rows [1];
Table.Rows [1] .Cells [1] .APPEndChild (bouton);
var a = row1.cells [0] .InnerHtml = this.value1;
var b = row2.cells [0] .InnerHtml = this.value2;
}
}
table.Create ();
</cript>
</docy>
</html>
L'effet de la création d'une méthode de table est:
Cliquez pour changer de code:
La copie de code est la suivante:
fonction qiehuan () {
// Obtenez une table
var table = document.getElementsByTagName ("Table") [0];
// Obtenez TR
var row1 = table.Rows [0];
var row2 = table.Rows [1];
// Échange de contenu
// Créer de nouveaux éléments pour stocker des données
var a = row1.cells [0] .InnerHtml;
var b = row2.cells [0] .InnerHtml;
row1.cells [0] .InnerHtml = b;
row2.cells [0] .InnerHtml = a;
}
Cliquez sur l'effet du bouton basculer est:
Extension:
1. Je veux cliquer sur l'ID / le nom / le sexe pour modifier le tri:
original
Effet
Code:
La copie de code est la suivante:
<! Doctype html>
<html lang = "en">
<adal>
<meta charset = "utf-8">
<Title> Document </Title>
</ head>
<body>
<ballage>
<th Colspan = "3"> Cliquez pour remplacer le contenu </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> mâle </td>
</tr>
<tr>
<td> 2 </td>
<td> b </td>
<TD> Femme </td>
</tr>
</ table>
<cript>
// Effet de liaison --- je ne suis pas valide
document.getElementById ('id'). AddEventListener ('click', f_switch, false);
document.getElementById ('name'). AddEventListener ('click', f_switch, false);
document.getElementById ('Sex'). AddEventListener ('click', f_switch, false);
fonction f_switch () {
// Obtenez une table
var table = document.getElementsByTagName ("Table") [0];
// Obtenez l'élément de ligne
var row1 = table.Rows [2];
var row2 = table.Rows [3];
// Méthode 1
// Créer de nouveaux éléments pour stocker des données
var newrow = document.CreateElement ("tr");
var newhtml = newrow.innerhtml = row2.InnerHtml;
var newrow2 = document.CreateElement ("tr");
var newhtml2 = newrow2.innerhtml = row1.innerhtml;
//remplacer
row1.innerhtml = newhtml;
row2.innerhtml = newhtml2;
// Méthode 2
// Je ne comprends pas ... la phrase suivante peut être réalisée
//Table.ApendChild(ROW1);
}
</cript>
<br>
</docy>
</html>