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
Detaillierte Schritte zur Installation eines Webservers mit Apache httpd2.4.37 auf centos8
Schritt 1: yum install httpd -y #httpd-Dienst ins...
Vue implementiert die Drag & Drop-Sortierfunktion der Seiten-Div-Box
vue implementiert die Drag & Drop-Sortierfunk...
Detaillierte Erläuterung der Rolle der Standarddatenbank nach der MySQL-Installation
Wenn Sie MySQL kennen, werden Sie feststellen, da...
Detaillierte Erklärung des Unterschieds und der Verwendung von Anführungszeichen und Backticks in MySQL
Vorwort Also habe ich diesen Blog geschrieben. Di...
Zusammenfassung der MySQL-Datenmigration
Inhaltsverzeichnis Vorwort: 1. Über die Datenmigr...
Implementierung der Docker-Bereitstellung eines MySQL-Clusters
Nachteile einer Single-Node-Datenbank Große Inter...
So optimieren Sie die langsame Like-Fuzzy-Abfrage in MySQL
Inhaltsverzeichnis 1. Einleitung: 2. Die erste Id...
Detaillierte Erklärung der Lösung für das Problem, dass die Nohup-Protokollausgabe unter Linux zu groß ist
Kürzlich habe ich ein Spark-Streaming-Programm in...
Das Prinzip und die Konfiguration des Nginx-Lastausgleichs sowie der dynamischen und statischen Trennung
Inhaltsverzeichnis 1. Nginx implementiert das Las...
Zusammenfassung und Praxis des Javascript-Prototyp-Kettendiagramms
Inhaltsverzeichnis Prototypenkette Wir können ein...
Automatisierte Schnittstellentests mit Postman
Inhaltsverzeichnis Hintergrundbeschreibung Erstel...
So führen Sie Befehle auf einem Remote-Linux-System über SSH aus
Manchmal müssen wir einige Befehle auf einem Remo...
Ein Beispiel für die Verwendung von CSS-Methoden zur Erzielung von Modularität
1. Was sind CSS-Methoden? CSS methodologies könne...
React implementiert eine hochadaptive virtuelle Liste
Inhaltsverzeichnis Vor der Transformation: Nach d...
Verwenden Sie momentJs, um eine Countdown-Komponente zu erstellen (Beispielcode)
Heute möchte ich einen Countdown von Vue und Mome...