Detaillierte Erklärung dynamisch generierter Tabellen mit Javascript
|
*Seite erstellen: zwei Eingabefelder und ein Button
Der Code lautet wie folgt:
<html>
<Kopf>
<title>Tabelle dynamisch generieren</title>
<Stiltyp = "Text/CSS">
</Stil>
</Kopf>
<Text>
Zeile: <input type="text" id="h"/><br/>
Spalte: <input type="text" id="l"/><br/>
<input type="button" value="Generieren" onclick="add1()"/>
<div id="divv">
</div>
</body>
<Skripttyp="text/javascript">
Funktion add1(){
/*
1. Holen Sie sich die eingegebenen Zeilen- und Spaltenwerte. 2. Generieren Sie eine Tabelle. - Durchlaufen Sie die Zeilen. - Durchlaufen Sie die Zellen in einer Zeile. 3. Zeigen Sie sie auf der Seite an. - Verwenden Sie das Attribut innerHTML, um den Tabellencode in einem div festzulegen. */
var h =document.getElementById("h").value;
//alarm(h);
var l =document.getElementById("l").value;
var tab = "<Tabellenrand='1' Randfarbe='rot'>";
für(var i=0;i<h;i++){
Tabulator + = "<tr>";
für(var j=0;j<l;j++){
Tabulatortaste +="<td>aaaa</td>"
}
Tabulatortaste +="</tr>"
}
Registerkarte +="</table>";
var div1 = document.getElementById("divv");
div1.innerHTML = Tab;
}
</Skript>
</html>Demonstration des Wirkungsdiagramms:
ZusammenfassenDieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können! Das könnte Sie auch interessieren:
|
<<: Binäre Typoperationen in MySQL
>>: Allgemeine Symbole in Unicode
Artikel empfehlen
Analyse der Implementierungsschritte für die Docker-Containerverbindung
Im Allgemeinen verwenden wir nach dem Start des C...
Tutorial zur Installation von Docker im Windows 10-Subsystem Ubuntu (WSL) (mit Bildern und Text)
Inhaltsverzeichnis Umgebungsbeschreibung Installi...
Beheben Sie das Problem, dass der Docker-Container das externe Netzwerk nicht anpingen kann
Als ich heute eine Redis-Umgebung in Docker erste...
Detaillierte Erklärung der Serveroptionen von Tomcat
1. Konfiguration Die ersten beiden sind standardm...
Einführung in ApplicationHost.config (IIS-Speicherkonfigurationsbereichsdatei)
Nehmen Sie für eine neu erstellte Website ASP.NET...
Mysql-Methode zum Kopieren einer Datenspalte einer Tabelle in eine Spalte einer anderen Tabelle
mysql kopiert eine Tabellenspalte in eine andere ...
Detaillierte Analyse von Absturzfällen bei MySQL-Instanzen
[Problembeschreibung] Unsere Produktionsumgebung ...
Css3 realisiert nahtloses Scrollen und Anti-Shake
Frage Das nahtlose Scrollen von Bildern und Texte...
Konfigurationsschema für die MySQL-Master-Slave-Synchronisierung unter dem Centos7-System
Vorwort Bei der Arbeit an einem Hochverfügbarkeit...
So importieren Sie Tomcat-Quellcode in Idea
Inhaltsverzeichnis 1. Laden Sie den Tomcat-Code h...
Reine CSS-Implementierung (kein Skript) Tooltip-Textaufforderungseffekt im HTML-Befehlsstil
Analysieren Sie den Ausführungsprozess. Bewegen S...
Vue implementiert kleine Suchfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Reiner CSS-Header, korrigierter Implementierungscode
Es gibt zwei Hauptgründe, warum es schwierig ist,...
JavaScript Canvas realisiert farbenfrohen Sonnenhalo-Effekt
In diesem Artikelbeispiel wird der spezifische Co...
Verbindung zum lokalen MySQL über Socket-Lösung „/tmp/mysql.sock“ nicht möglich
Fehlermeldung: FEHLER 2002: Verbindung zum lokale...