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
HTML-Formular-Tag-Tutorial (5): Textfeld-Tag
<br />Mit diesem Tag können Sie ein mehrzeil...
SQL-Abfrage MySql-Datenbanktabellenname und -beschreibung Tabellenfeld- (Spalten-)Informationen
Im Folgenden finden Sie eine Einführung in die Ve...
So entfernen Sie den gepunkteten Rahmen beim Klicken auf einen Link in FireFox
Ich bin heute auf mehrere Browserkompatibilitätsp...
MySQL-Installations- und Konfigurationsmethoden und Vorsichtsmaßnahmen unter der Windows-Plattform
2.1, MSI-Installationspaket 2.1.1、Installation Be...
Einführung in die Verwendung von CSS3-Farbwerten (RGBA) und Farbverlaufsfarben
Vor CSS3 konnten Verlaufsbilder nur als Hintergru...
Detailliertes Beispiel zum Auffinden und Optimieren langsamer SQL-Abfragen in MySQL
Inhaltsverzeichnis 1. So finden und optimieren Si...
Detaillierter Prozess zur Erstellung eines VR-Panoramaprojekts mit React und Threejs
Vor Kurzem habe ich gelernt, React mit Three.js z...
Zwei gängige Lösungen für den HTML-Textüberlauf zeigen Auslassungszeichen an
Methode 1: Verwenden Sie zur Lösung die CSS-Überl...
Erkunden Sie die gängigen VMware ESXI CLI-Befehle
Inhaltsverzeichnis 【Allgemeine Befehle】 [Zusammen...
Beispiel für eine MySQL-DML-Sprachoperation
Zusätzliche Erklärung, Fremdschlüssel: Verwenden ...
Zusammenfassung der Kenntnisse und der Verwendung von Linux-VI-Befehlen
Detaillierte Erklärung des Linux-Befehls vi Der v...
Detaillierte Erklärung zum schnellen Erstellen einer Blog-Website mit Docker
Inhaltsverzeichnis 1. Vorbereitung 2. Bereitstell...
Detaillierte Analyse des MySQL-Datentyps DECIMAL
Vorwort: Wenn wir Dezimalzahlen speichern müssen ...
js+Html zur Realisierung einer Tabellenbearbeitungsoperation
In diesem Artikel wird der spezifische Code von j...
Eine kurze Einführung in React
Inhaltsverzeichnis 1. CDN-Einführung 1.1 reagiere...