js implementiert einen einzigen Klick zum Ändern der Tabelle
|
Pure js implementiert eine mit einem Klick bearbeitbare Tabelle (ähnlich einem Transkript) zu Ihrer Referenz. Der spezifische Inhalt ist wie folgt Funktion: Klicken Sie auf die Tabelle im Transkript, um die Daten zu ändern und die Größe der eingegebenen Zahl zu überprüfen, z. B. nicht kleiner als 0 und nicht größer als 100. Die Spalte „Gesamtpunktzahl“ summiert die Gesamtpunktzahl (unter Verwendung von es6-Vorlagenzeichenfolgen). Ergebnis:
Code: <!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
Tisch{
Rand: 0 automatisch;
z-Index:999999;
Rahmen-Zusammenbruch: Zusammenbruch;
}
das {
Hintergrundfarbe: #4CAF50;
/* Hintergrundbild: linearer Farbverlauf (nach rechts, #eea2a2 0 %, #bbc1bf 19 %, #57c6e1 42 %, #b49fda 79 %, #7ac5d8 100 %); */
Farbe: weiß;
}
Tabelle th,tr,td{
Breite: 100px;
Textausrichtung: zentriert;
}
Tabelleneingabe{
Rand: keiner;
Gliederung: keine;
Breite: 100 %;
}
.Eingabeklasse{
Breite: 80px;
Höhe: 100%
}
</Stil>
</Kopf>
<Text>
<div Stil="Position: relativ;Rand oben: 200px;Textausrichtung: Mitte">
<h2 style="margin-bottom: 50px;">Formular zur Punkteregistrierung</h2>
<div >
<Tabellengrenze="1">
<Kopf>
<th>Matrikelnummer</th>
<th>Name</th>
<th>Sprache</th>
<th>Mathematik</th>
<th>Englisch</th>
<th>Gesamtpunktzahl</th>
</thead>
<tbody>
</tbody>
</Tabelle>
</div>
</div>
</body>
<Skript>
// Array let Daten = [
{
Ich würde:1101,
Name: „Xiao Wang“,
Englisch:100,
Mathe:80,
Englisch:91,
gesamt:271
},
{
Ich würde:1102,
Name: „Xiao Zeng“,
Englisch:88,
Mathe:87,
Englisch:92,
Gesamt:267
},
{
Ich würde:1103,
Name: „Xiao Zhao“,
Englisch:75,
Mathe:20,
Englisch:86,
gesamt:181
},
{
Ich würde:1104,
Name: „Xiao Zhou“,
Englisch:65,
Mathe:81,
Englisch:83,
Gesamt:229
}
]
fenster.onload = funktion(){
initdata()
}
//Daten initialisieren//Vorlage füllt Datenfunktion initdata(){
let tbodyinner = document.getElementsByTagName("tbody")[0]
lass html = ''
für (lass i = 0; i < Datenlänge; i ++) {
html+=`
<tr>
<td>${data[i].id}</td>
<td>${Daten[i].name}</td>
<td name="Klasse" Klasse="chinesisch">${data[i].Chinesisch}</td>
<td name="Klasse" Klasse="Mathematik">${data[i].Mathematik}</td>
<td name="Klasse" Klasse="Englisch">${data[i].Englisch}</td>
<td class="allscore">${parseInt(data[i].Chinesisch)+parseInt(data[i].Mathematik)+parseInt(data[i].Englisch)}</td>
</tr>
`
}
// tbody.innerHTML="..."Inhalt zu tbody hinzufügen tbodyinner.innerHTML = html
getNode()
}
// Auf Klickereignisse warten Funktion getNode(){
let Betreff = document.getElementsByName("Note")
für (lass i = 0; i < Betreff.Länge; i++) {
Betreff[i].addEventListener('Klick',Funktion(){
bearbeite(dies)
})
}
}
//Maus-Eingabepunkt-Funktion edit(i){
let inputlen = document.getElementsByTagName('input').length
let alterWert = i.innerHTML
wenn(Eingabelänge==0){
// Setze das Tag auf leer i.innerHTML = ''
// Eingabeobjekt hinzufügen let inp = document.createElement("input")
inp.value = alterWert
inp.classList.add("Eingabeklasse")
// Untergeordneten Knoten hinzufügen i.appendChild(inp)
// Inhalt im Text abrufen inp.select()
// Fokusverlustereignis inp.onblur = function(){
wenn(inp.value<=100&&inp.value>=0){
i.innerHTML = inp.Wert
let val1 = i.parentNode.childNodes[5].innerHTML
let val2 = i.parentNode.childNodes[7].innerHTML
let val3 = i.parentNode.childNodes[9].innerHTML
i.parentNode.childNodes[11].innerHTML = parseInt(Wert1)+parseInt(Wert2)+parseInt(Wert3)
}anders{
return alert("Der Datenwert ist falsch, bitte erneut eingeben!");
}
}
}
}
</Skript>
</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:
|
<<: Erläuterung der Dockerfile-Anweisungen und der grundlegenden Struktur
>>: MySQL-Optimierungszusammenfassung – Gesamtzahl der Abfrageeinträge
Artikel empfehlen
Optimieren Sie die Speichereffizienz von BLOB- und TEXT-Spalten in InnoDB-Tabellen
Lassen Sie uns zunächst einige wichtige Punkte zu...
Einige Tipps zum Schreiben leistungsstarker HTML-Anwendungen
Wie können Sie die Leistung einer Webseite verbes...
Installieren Sie MySQL (einschließlich utf8) mit Docker unter Windows/Mac
Inhaltsverzeichnis 1. Docker-Installation auf dem...
So verwenden Sie CSS, um je nach Unterelementen unterschiedliche Stile zu schreiben
Der Effekt, den wir erreichen müssen: Was wird be...
JS implementiert den Beispielcode der Dezimalkonvertierung in Hexadezimal
Vorwort Beim Schreiben von Code stoßen wir gelege...
Zusammenfassung der 3 kleineren Fehler, die während der Installation von MySQL 8.0 aufgetreten sind
Vorwort In der Vergangenheit verwendete das Unter...
Mit JS einen rotierenden Weihnachtsbaum in HTML implementieren
<!DOCTYPE HEML PUBLIC> <html> <Kop...
Detaillierte Erklärung zum virtuellen Javascript-DOM
Inhaltsverzeichnis Was ist virtueller Dom? Warum ...
Probleme und Lösungen bei der Verwendung der TweenMax-Animationsbibliothek in Angular
Ich habe in letzter Zeit nichts zu tun, also bast...
Vue realisiert den Produktlupeneffekt
In diesem Artikelbeispiel wird der spezifische Co...
Verwenden Sie @font-face, um Sonderzeichen auf Webseiten zu implementieren (benutzerdefinierte Schriftarten erstellen)
Vor einigen Tagen habe ich einen Artikel über die...
So erstellen Sie einen Styleguide für Ihre Website im Webinterface-Design (mit Bildern und Text)
Was ist ein Styleguide? Einfach ausgedrückt handel...
Ein möglicher Fehler, wenn MySQL die Summenfunktion auf der Fensterfunktion ausführt
Beim Verwenden der MySql-Fensterfunktion zum Samm...
Implementierung von Diensten im Docker für den Zugriff auf Hostdienste
Inhaltsverzeichnis 1. Szenario 2. Lösung 3. Fazit...
Detaillierte Erläuterung spezieller Phänomene, Beispiele für die Sleep-Funktion in MySQL
Vorwort Die Schlafsystemfunktion in MySQL hat nur...