JavaScript zum Erzielen eines dynamischen Tabelleneffekts

In diesem Artikel wird der spezifische Code für JavaScript zur Erzielung dynamischer Tabelleneffekte zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Dynamische Tabelle</title>
    <Stil>
        .bigDiv{
            Breite: 600px;
            Rand: 50px automatisch;
        }
        Tisch{
            Rand: durchgehend schwarz 2px;
            Breite: 500px;
            /*Ränder werden zu einem einzigen Rand zusammengeführt*/
            Rahmen-Zusammenbruch: Zusammenbruch;
        }
        das {
            Hintergrundfarbe: dunkelgrau;
            /*Fettdruck für Tabellenkopfzeile*/
            Schriftstärke: fett;
            /*Schriftfarbe #ffffff: weiß*/
            Farbe: #ffffff;
        }
        th,td{
            Rand: 1px tief schwarz;
            /* Geben Sie das Breiten- und Höhenverhalten an. Die Angabe der Breite und Höhe eines Elements (Minimum-/Maximum-Eigenschaften) gilt für die Breite und Höhe der Box*/
            Box-Größe: Inhaltsbox;
            Textausrichtung: zentriert;
            /*Breite und Höhe angeben*/
            Breite: 50px;
            Höhe: 30px;
            Schriftgröße: 14px;
        }
        .Aber{
            Breite: 150px;
            Rand: 5px 400px;
            /*Stellen Sie sicher, dass alle untergeordneten Elemente des Flexbox-Modellobjekts die gleiche Länge haben und ignorieren Sie den Inhalt in ihnen*/
            Anzeige: Flex;
            /*Lassen Sie um jedes Element im <div>-Element des Flexbox-Objekts Platz*/
            Inhalt ausrichten: Flex-Ende;
        }
    </Stil>
</Kopf>
<Text>
<div Klasse="großesDiv">
<Tabelle ausrichten="zentrieren">
    <Kopf>
    <tr>
        <th>Seriennummer</th>
        <th>Name</th>
        <th>Alter</th>
        <th>Geschlecht</th>
        <th>Kontaktnummer</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Xiaoyao</td>
        <td>18</td>
        <td>Männlich</td>
        <td>12354546</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Xiaobai</td>
        <td>19</td>
        <td>Weiblich</td>
        <td>252323523</td>
    </tr>
    </tbody>
</Tabelle>
<div Klasse="aber">
    <button type="button" onclick="addRow()">Zeile hinzufügen</button>
    <button type="button" onclick="saveData()">Daten speichern</button>
</div>
</div>
<Skript>
    Variablen-ID;
    Variablenname;
    var Alter;
    var Geschlecht;
    var Telefon;
    var tdArr = neues Array();
    Funktion addRow() {
        let tbodyObj = document.getElementsByTagName("tbody")[0];
        let trObj = document.createElement("tr");
        tbodyObj.appendChild(trObj);
        //Erstelle 5 td
        für (sei i = 0; i < 5; i++) {
            let tdObj = document.createElement("td");
            trObj.appendChild(tdObj);
            //Eingabefeldobjekt erstellen let inputObj = document.createElement("input");
            //Setze das ID-Attribut des Eingabeobjekts inputObj.setAttribute("id",i);
            //Füge jedem Eingabefeld ein Fokusverlustereignis hinzu inputObj.addEventListener("blur",function () {
                Schalter (diese.id) {
                    Fall "0":
                        id=dieser.Wert;
                        brechen;
                    Fall "1":
                        Name=dieser.Wert;
                        brechen;
                    Fall "2":
                        Alter=dieser.Wert;
                        brechen;
                    Fall "3":
                        Geschlecht=dieser.Wert;
                        brechen;
                    Fall "4":
                        Telefon=dieser.Wert;
                        brechen;
                }
            });

            //Eingaberahmen ausblenden, wenn nicht auf die Eingabe geklickt wird inputObj.style.border="0";
            //Rand beim Klicken auf die Eingabe ausblenden inputObj.style.outline="none";
            //Breite des Eingabefelds festlegen inputObj.style.width="80px";
            //Höhe des Eingabefelds festlegen inputObj.style.height="25px";
            //Setze den Rand des Eingabefelds auf 0
            inputObj.style.margin="0";
            //td hinzufügen tdObj.appendChild(inputObj);
            //tdObj zu tdArr hinzufügen tdArr.push(tdObj);
        }
    }
    Funktion saveData() {
        tdArr[0].innerHTML=id;
        tdArr[1].innerHTML=Name;
        tdArr[2].innerHTML=Alter;
        tdArr[3].innerHTML=Geschlecht;
        tdArr[4].innerHTML=Telefon;
        tdArr.Länge=0;
    }
</Skript>
</body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Detaillierte Erklärung zur Implementierung dynamischer Tabellen in JavaScript
Detaillierte Erklärung dynamisch generierter Tabellen mit Javascript
JavaScript zum Erreichen eines dynamischen Farbwechsels der Tabelle
JavaScript zum Implementieren einer einfachen dynamischen Tabelle
JavaScript zum dynamischen Generieren von Tabellen auf Webseiten
Beispiel für die dynamische Generierung einer Tabelle mit JavaScript
Detaillierte Erklärung zur Generierung dynamischer Tabellen und dynamischer Effekte mit JavaScript

<<: Eine kurze Diskussion über die Lösung des Problems mit verstümmeltem Code und der Portbelegung bei Tomcat

>>: Beispiel für die Erschöpfung der MySQL-Auto-Increment-ID