Als ich zuvor das Frontend interviewte, stieß ich auf eine Interviewfrage. Ich hatte damals keine Gedanken, also habe ich es nicht beantwortet. Heute habe ich es sortiert und mit Ihnen geteilt:
Die ursprüngliche Frage lautet: Verwenden Sie die Objektmethode, um eine 2x2 -Tabelle zu erstellen, die eine Schaltfläche in der zweiten Zeile und in der zweiten Spaltenzelle erfordert. Wenn Sie auf diese Schaltfläche klicken, werden der Wert der ersten Zeile und der Wert der ersten Spalte der zweiten Zeile und der Wert der ersten Spalte der zweiten Zeile siehe Abbildung unten siehe Abbildung
Erstellen Sie eine Tabelle
Klicken Sie auf Effekt
Ich bin dumm. Wenn Sie einen besseren Weg haben, sagen Sie es mir bitte. Ich habe lange darüber nachgedacht und endlich einige Ergebnisse erzielt:
1. Erstellen Sie ein Tabellenobjekt
Die Codekopie lautet wie folgt:
<! DocType html>
<html lang = "en">
<kopf>
<meta charset = "utf-8">
<title> document </title>
<Styles>
Tabelle TD {Text-Align: Mitte;}
</style>
</head>
<body>
<h2> Tabellen erstellen mit Objekten </H2>
<Script>
var table = {
Wert1: "Wert1",
Wert2: "value2",
Reihe: 2,
Zelle: 2,
erstellen: function () {
// Erstellen Sie eine Tabelle
var table = document.createelement ("Tabelle");
table.border = 1;
Tabelle.width = "500";
// Schaltfläche erstellen
var button = document.createelement ("button");
button.innerhtml = "switch";
button.name = "qiehuan";
button.setattribute ("Onclick", "Qiehuan ()");
// Erstellen Sie eine Zeile
für (var i = 0; i <this.row; i ++) {
table.insertrow ();
}
// Erstellen Sie eine Spalte
für (var i = 0; i <this.cell; i ++) {
table.rows [i] .insertcell ();
table.rows [i] .insertcell ();
}
// Tabelle zum Körper hinzufügen
document.body.Appendchild (Tabelle);
var table = document.getElementsByTagName ("Tabelle") [0];
var row1 = table.rows [0];
var row2 = table.rows [1];
Tabelle.Rows [1] .Cells [1] .AppendChild (Taste);
var a = row1.cells [0] .innerhtml = this.value1;
var b = row2.cells [0] .innerhtml = this.Value2;
}
}
Tabelle.Create ();
</script>
</body>
</html>
Der Effekt der Erstellung einer Tabellenmethode ist:
Klicken Sie, um den Code zu wechseln:
Die Codekopie lautet wie folgt:
Funktion qiehuan () {
// Tabelle bekommen
var table = document.getElementsByTagName ("Tabelle") [0];
// tr
var row1 = table.rows [0];
var row2 = table.rows [1];
// Inhalte austauschen
// Erstellen Sie neue Elemente, um Daten zu speichern
var a = row1.cells [0] .innerhtml;
var b = row2.cells [0] .innerhtml;
row1.cells [0] .innerhtml = b;
row2.cells [0] .innerhtml = a;
}
Wenn Sie auf den Schaltflächeneffekt der Umschaltung klicken, ist:
Verlängerung:
1. Ich möchte auf ID/Name/Sex klicken, um die Sortierung zu ändern:
Original
Wirkung
Code:
Die Codekopie lautet wie folgt:
<! DocType html>
<html lang = "en">
<kopf>
<meta charset = "utf-8">
<title> document </title>
</head>
<body>
<tabelle>
<th colspan = "3"> Klicken Sie Klicken, um den Inhalt </th> zu ersetzen
<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ännlich </td>
</tr>
<tr>
<td> 2 </td>
<td> b </td>
<td> weiblich </td>
</tr>
</table>
<Script>
// Bindungseffekt --- Ich bin ungültig
document.getElementById ('id'). addEventListener ('klick', f_switch, false);
document.getElementById ('name'). addEventListener ('klick', f_switch, false);
document.getElementById ('sex'). addEventListener ('klick', f_switch, false);
Funktion f_switch () {
// Tabelle bekommen
var table = document.getElementsByTagName ("Tabelle") [0];
// Holen Sie sich das Zeilenelement
var row1 = table.rows [2];
var row2 = table.rows [3];
// Methode 1
// Erstellen Sie neue Elemente, um Daten zu speichern
var newrow = document.createelement ("tr");
var newhtml = newrow.innerhtml = row2.InnerHtml;
var newrow2 = document.createelement ("tr");
var Newhtml2 = newRow2.InnerHtml = row1.innerhtml;
//ersetzen
row1.innerhtml = newhtml;
Row2.Innerhtml = newhtml2;
// Methode 2
// Ich verstehe nicht ... der folgende Satz kann realisiert werden
//table.appendchild(row1);
}
</script>
<br>
</body>
</html>