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
Hostübergreifende Kommunikation zwischen Docker-Containern - Overlay-basierte Implementierungsmethode
Overlay-Netzwerkanalyse Die integrierte netzwerkü...
Verwendung des Vuex-Namespace
Inhaltsverzeichnis Da Vuex einen einzelnen Zustan...
Tutorial zum Erstellen einer visuellen Leistungsüberwachungsplattform mit JMeter+Grafana+InfluxDB in einer Docker-Umgebung
Inhaltsverzeichnis 1. Docker installieren 2. Inst...
Detaillierte Erläuterung der Konstruktion der Lese-/Schreibtrennung bei der MySQL-Master-Slave-Replikation
MySQL Master-Slave-Einrichtung Die Einstellungen ...
Upgrade der Docker-Version von MySQL 5.7 auf MySQL 8.0.13, Datenmigration
Inhaltsverzeichnis 1. Sichern Sie die alten MySQL...
Mysql8.0 verwendet Fensterfunktionen, um Sortierprobleme zu lösen
Einführung in MySQL-Fensterfunktionen MySQL unter...
Implementierung der Docker-Bereitstellung von Webprojekten
Im vorherigen Artikel wurde der Docker-Dienst ins...
Verwenden Sie eine DIV-Maske, um das Problem zu lösen, dass das direkte Aktivieren des Kontrollkästchens mit der Maus ungültig ist
Während des Front-End-Entwicklungsprozesses trat e...
Detaillierte Erläuterung der Sicherung und Wiederherstellung von PSSQL-Datenbanken in Docker
1. Postgres-Datenbanksicherung in Docker Befehl: ...
So passen Sie mit CSS einen schöneren Link-Prompt-Effekt an
Vorschlag: Das möglichst häufige handschriftliche ...
Wissen Sie, warum Vue-Daten eine Funktion sind?
Erklärung auf der offiziellen Website: Wenn eine ...
Detailliertes Tutorial zur Installation der MySQL 8.0.20-Datenbank auf CentOS 7
Weiterführende Literatur: MySQL8.0.20-Installatio...
Probleme beim Ändern des Passworts und beim Herstellen einer Verbindung zu Navicat bei der Installation und Verwendung von MySQL 8.0.16 unter Windows 7
Bei der Installation von MySQL sind mir mehrere P...
Tutorial zur Installation der dekomprimierten Version von MySQL 5.7.18 unter Windows
1. Installationsprozess MySQL-Version: 5.7.18 1. ...
Implementierung von React-Loop-Daten (Liste)
Lassen Sie uns zunächst die Daten simulieren, die...