js+Html zur Realisierung einer Tabellenbearbeitungsoperation
|
In diesem Artikel wird der spezifische Code von js + HTML zur Realisierung der Bearbeitungsoperation der Tabelle zu Ihrer Information freigegeben. Der spezifische Inhalt ist wie folgt Funktionsbeschreibung: Klicken Sie auf die Seite, um die Zelle td editierbar zu machen. Nach der Eingabe des Inhalts wird der eingegebene Inhalt gespeichert, wenn die Zelle den Fokus verliert.
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8" />
<title>Tabellendaten bearbeiten</title>
<style type="text/css">
<!--
Körper, Div, P, Ul, Li, Schriftart, Span, Td, Th {
Schriftgröße: 10pt;
Zeilenhöhe: 155 %;
}
Tisch{
Obere Rahmenbreite: 1px;
Breite des rechten Rahmens: 1px;
untere Rahmenbreite: 0px;
Rahmenbreite links: 1px;
Rahmen-Oberteil-Stil: durchgezogen;
Rahmen-rechts-Stil: durchgezogen;
Rahmen-unten-Stil: keiner;
Rahmen-links-Stil: durchgezogen;
Rahmenfarbe oben: #CCCCCC;
Rahmenfarbe rechts: #CCCCCC;
Farbe des unteren Rahmens: #CCCCCC;
Rahmenfarbe links: #CCCCCC;
}
td{
Breite des unteren Rahmens: 1px;
Rahmen-unten-Stil: durchgezogen;
Farbe des unteren Rahmens: #CCCCCC;
}
.EditCell_TextBox {
Breite: 90%;
Rand: 1px durchgezogen #0099CC;
}
.EditCell_DropDownList {
Breite: 90%;
}
-->
</Stil>
<Skript>
/**
* JS implementiert editierbare Tabellen * Verwendung: EditTables(tb1,tb2,tb2,......);
**/
//Mehrere Tabellen zum Bearbeiten festlegen Funktion EditTables(){
für(var i=0;i<Argumente.Länge;i++){
SetTableCanEdit(Argumente[i]);
}
}
//Tabelle so einrichten, dass sie bearbeitet werden kann Funktion SetTableCanEdit(table){
für(var i=1; i<table.rows.length;i++){
SetRowCanEdit(Tabelle.Zeilen[i]);
}
}
Funktion SetRowCanEdit(Zeile){
für(var j=0;j<Zeile.Zellen.Länge; j++){
//Wenn die aktuelle Zelle den Bearbeitungstyp angibt, ist die Bearbeitung zulässig. var editType = row.cells[j].getAttribute("EditType");
wenn(!editType){
//Wenn die aktuelle Zelle nicht angegeben ist, prüfen Sie, ob die aktuelle Spalte editType = row.parentNode.rows[0].cells[j].getAttribute("EditType"); angibt.
}
wenn(Bearbeitungstyp){
Zeile.Zellen[j].onclick = Funktion (){
Zelle bearbeiten(diese);
}
}
}
}
//Setze die angegebene Zelle auf editierbar Funktion EditCell(element, editType){
var editType = element.getAttribute("EditType");
wenn(!editType){
//Wenn die aktuelle Zelle nicht angegeben ist, prüfen Sie, ob die aktuelle Spalte editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("EditType"); angibt.
}
Schalter(Bearbeitungstyp){
Fall "TextBox":
CreateTextBox(element, element.innerHTML);
brechen;
Fall "DropDownList":
CreateDropDownList(element);
brechen;
Standard:
brechen;
}
}
//Erstellen Sie ein editierbares Eingabefeld für die Zellenfunktion CreateTextBox(element, value){
//Überprüfen Sie den Bearbeitungsstatus. Wenn er sich bereits im Bearbeitungsstatus befindet, überspringen Sie ihn. var editState = element.getAttribute("EditState");
wenn(editState != "true"){
//Textfeld erstellen var textBox = document.createElement("INPUT");
textBox.Typ = "Text";
textBox.className="EditCell_TextBox";
//Setze den aktuellen Wert des Textfeldes if (! value) {
Wert = Element.getAttribute("Wert");
}
textBox.Wert = Wert;
//Setze das Fokusverlustereignis des Textfelds textBox.onblur = function () {
CancelEditCell(dieser.übergeordneterKnoten, dieser.Wert);
}
//Der aktuellen Zelle ein Textfeld hinzufügen ClearChild(element);
element.appendChild(textBox);
textBox.fokus();
textBox.auswählen();
//Ändern Sie die Statusvariable element.setAttribute("EditState", "true");
element.parentNode.parentNode.setAttribute("Aktuelle Zeile", element.parentNode.rowIndex);
}
}
//Erstellen Sie ein Auswahlfeld für die Zellenfunktion CreateDropDownList(element, value){
//Überprüfen Sie den Bearbeitungsstatus. Wenn er sich bereits im Bearbeitungsstatus befindet, überspringen Sie ihn. var editState = element.getAttribute("EditState");
wenn(editState != "true"){
//Unteren Rahmen erstellen var downList = document.createElement("Select");
downList.className="EditCell_DropDownList";
//Listenelemente hinzufügen var items = element.getAttribute("DataItems");
wenn(!items){
Elemente = Element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("DataItems");
}
wenn(Artikel){
Elemente = eval("[" + Elemente + "]");
für(var i=0; i<items.length; i++){
var oOption = document.createElement("OPTION");
oOption.text = Elemente[i].text;
oOption.Wert = Elemente[i].Wert;
downList.options.add(oOption);
}
}
//Setze den aktuellen Wert der Liste if (! value) {
Wert = Element.getAttribute("Wert");
}
downList.value = Wert;
//Setze das Fokusverlustereignis des nächsten Frames downList.onblur = function (){
CancelEditCell(dieser.übergeordneterKnoten, dieser.Wert, diese.Optionen[dieser.ausgewählterIndex].Text);
}
//Der aktuellen Zelle einen unteren Rahmen hinzufügen ClearChild(element);
Element.AnhängenUntergeordnetesElement(downList);
downList.focus();
//Statusänderungen aufzeichnen element.setAttribute("EditState", "true");
element.parentNode.parentNode.setAttribute("LastEditRow", element.parentNode.rowIndex);
}
}
//Zellenbearbeitung abbrechen Funktion CancelEditCell(element, value, text){
element.setAttribute("Wert", Wert);
wenn(Text){
element.innerHTML = Text;
}anders{
element.innerHTML = Wert;
}
element.setAttribute("EditState", "false");
//Überprüfen, ob eine Formelberechnung vorliegt CheckExpression(element.parentNode);
}
// Alle Kindknoten des angegebenen Objekts löschen function ClearChild(element) {
element.innerHTML = "";
}
//Zeile hinzufügen Funktion AddRow(table, index){
var letzte Zeile = Tabelle.Zeilen[Tabelle.Zeilen.Länge-1];
var neueRow = lastRow.cloneNode(true);
//Um die Seriennummer der neu hinzugefügten Zeile zu berechnen, müssen Sie das jQuery-JAR-Paket importieren: var startIndex = $.inArray(lastRow,table.rows);
var endIndex = Tabelle.Zeilen;
Tabelle.tBodies[0].appendChild(neueZeile);
neueZeile.Zellen[0].innerHTML=endIndex-startIndex;
SetRowCanEdit(neue Zeile);
gib neue Zeile zurück;
}
//Zeile löschen Funktion DeleteRow(table, index){
für(var i=Tabelle.Zeilen.Länge - 1; i>0;i--){
var chkOrder = Tabelle.Zeilen[i].Zellen[0].erstesKind;
wenn(chkOrder){
if(chkOrder.type = "CHECKBOX"){
wenn(chkOrder.checked){
//Löschung ausführen table.deleteRow(i);
}
}
}
}
}
//Extrahieren Sie den Wert der Tabelle, JSON-Formatfunktion GetTableData(table){
var tableData = neues Array();
alert("Anzahl der Zeilen: " + table.rows.length);
für(var i=1; i<table.rows.length;i++){
: tableData.push(GetRowData(tabProduct.rows[i]));
}
gibt Tabellendaten zurück;
}
//Extrahiere die Daten der angegebenen Zeile im JSON-Format Funktion GetRowData(row){
var Zeilendaten = {};
für(var j=0;j<Zeile.Zellen.Länge; j++){
Name = Zeile.parentNode.rows[0].cells[j].getAttribute("Name");
wenn(Name){
var Wert = Zeile.Zellen[j].getAttribute("Wert");
wenn(!Wert){
Wert = Zeile.Zellen[j].innerHTML;
}
Zeilendaten[Name] = Wert;
}
}
//alarm("Produktname:" + rowData.Produktname);
//Oder so: alert("ProductName:" + rowData["ProductName"]);
Zeilendaten zurückgeben;
}
//Überprüfen Sie die Felder, die in der aktuellen Datenzeile ausgeführt werden müssen. Funktion CheckExpression(row){
für(var j=0;j<Zeile.Zellen.Länge; j++){
expn = row.parentNode.rows[0].cells[j].getAttribute("Ausdruck");
//Wenn die Formel angegeben ist, ist eine Berechnung erforderlich, wenn (expn) {
var Ergebnis = Ausdruck (Zeile, Ausdruck);
var format = row.parentNode.rows[0].cells[j].getAttribute("Format");
if(format){
//Wenn das Format angegeben ist, formatieren Sie den Textwert row.cells[j].innerHTML = formatNumber(Expression(row,expn), format);
}anders{
Zeile.Zellen[j].innerHTML = Ausdruck(Zeile,Ausdruck);
}
}
}
}
//Berechnen Sie die Felder, die berechnet werden müssen Funktion Expression(row, expn){
var rowData = GetRowData(row);
//Schleifenwertberechnung for(var j=0;j<row.cells.length; j++){
Name = Zeile.parentNode.rows[0].cells[j].getAttribute("Name");
wenn(Name){
var reg = neuer RegExp(Name, "i");
expn = expn.replace(reg, rowData[name].replace(/\,/g, ""));
}
}
gibt eval(Ausdruck) zurück;
}
///
/**
* Formatierungsnummernanzeigemodus * Verwendung * formatNumber(12345.999,'#,##0.00');
* formatNumber(12345.999,'#,##0.##');
* Formatnummer (123, '000000');
* @param Nummer
* @param-Muster
*/
/* Das Folgende ist ein Beispiel: formatNumber('','')=0
formatNumber(123456789012.129,null)=123456789012
formatNumber(null,null)=0
formatNumber(123456789012.129,'#,##0.00')=123,456,789,012.12
formatNumber(123456789012.129,'#,##0.##')=123,456,789,012.12
formatNumber(123456789012.129,'#0.00')=123,456,789,012.12
formatNumber(123456789012.129,'#0.##')=123,456,789,012.12
formatNumber(12.129,'0.00')=12.12
formatNumber(12.129,'0.##')=12.12
formatNumber(12,'00000')=00012
formatNumber(12,'#.##')=12
formatNumber(12,'#.00')=12.00
formatNumber(0,'#.##')=0
*/
Funktion formatNumber(num,pattern){
var strarr = num?num.toString().split('.'):['0'];
var fmtarr = Muster?Muster.split('.'):[''];
var retstr='';
// Integer-Teil var str = strarr[0];
var fmt = fmtarr[0];
var i = str.Länge-1;
var Komma = falsch;
für(var f=fmt.length-1;f>=0;f--){
Schalter(fmt.substr(f,1)){
Fall '#':
wenn(i>=0 ) retstr = str.substr(i--,1) + retstr;
brechen;
Fall '0':
wenn(i>=0) retstr = str.substr(i--,1) + retstr;
sonst retstr = '0' + retstr;
brechen;
Fall ',':
Komma = wahr;
retstr=','+retstr;
brechen;
}
}
wenn(i>=0){
wenn(Komma){
var l = str.Länge;
für(;i>=0;i--){
retstr = str.substr(i,1) + retstr;
wenn (i>0 und ((li)%3)==0) retstr = ',' + retstr;
}
}
sonst retstr = str.substr(0,i+1) + retstr;
}
retstr = retstr+'.';
// Den Dezimalteil verarbeiten str=strarr.length>1?strarr[1]:'';
fmt=fmtarr.Länge>1?fmtarr[1]:'';
ich = 0;
für(var f=0;f<fmt.length;f++){
Schalter(fmt.substr(f,1)){
Fall '#':
wenn(i<str.length) retstr+=str.substr(i++,1);
brechen;
Fall '0':
wenn(i<str.length) retstr+= str.substr(i++,1);
sonst retstr+='0';
brechen;
}
}
return retstr.replace(/^,+/,'').replace(/\.$/,'');
}
</Skript>
</Kopf>
<Text>
<form id="form1" name="form1" method="post" action="">
<h3>Bearbeitbare Tabelle</h3>
<table width="698" border="0" cellpadding="0" cellspacing="0" id="tabProduct">
<tr>
<td width="32" align="center" bgcolor="#EFEFEF" Name="Anzahl"><input type="checkbox" name="checkbox" value="checkbox" /></td>
<td width="186" bgcolor="#EFEFEF" Name="Num" EditType="TextBox">Seriennummer</td>
<td width="152" bgcolor="#EFEFEF" Name="Produktname" EditType="DropDownList" DataItems="{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'},{text:'D',value:'d'}">Produktname</td>
<td width="103" bgcolor="#EFEFEF" Name="Betrag" EditType="TextBox">Menge</td>
<td width="103" bgcolor="#EFEFEF" Name="Preis" EditType="TextBox">Stückpreis</td>
<td width="120" bgcolor="#EFEFEF" Name="SumMoney" Ausdruck="Betrag*Preis" Format="#,###.00">Gesamt</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><input Typ="Kontrollkästchen" Name="Kontrollkästchen2" Wert="Kontrollkästchen" /></td>
<td bgcolor="FFFFFF">1</td>
<td bgcolor="#FFFFFF" Value="c">C</td>
<td bgcolor="FFFFFF">0</td>
<td bgcolor="FFFFFF">0</td>
<td bgcolor="FFFFFF">0</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><input Typ="Kontrollkästchen" Name="Kontrollkästchen22" Wert="Kontrollkästchen" /></td>
<td bgcolor="FFFFFF">2</td>
<td bgcolor="#FFFFFF" Wert="d">D</td>
<td bgcolor="FFFFFF">0</td>
<td bgcolor="FFFFFF">0</td>
<td bgcolor="FFFFFF">0</td>
</tr>
</Tabelle>
<br />
<input type="button" name="Senden" value="Hinzufügen" onclick="AddRow(document.getElementById('tabProduct'),1)" />
<input type="button" name="Submit2" value="Löschen" onclick="DeleteRow(document.getElementById('tabProduct'),1)" />
<input type="button" name="Submit22" value="Zurücksetzen" onclick="window.location.reload()" />
<input type="submit" name="Submit3" value="Senden" onclick="GetTableData(document.getElementById('tabProduct'));return false;" />
</form>
<script language="javascript" src="GridEdit.js"></script>
<Skriptsprache="Javascript">
var tabProduct = document.getElementById("tabProduct");
// Legen Sie fest, dass die Tabelle bearbeitbar ist. // Sie können mehrere gleichzeitig festlegen, zum Beispiel: EditTables(tb1,tb2,tb2,......)
Tabellen bearbeiten(RegisterkarteProdukt);
</Skript>
</body>
</html>Die Wirkung ist wie folgt:
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:
|
<<: So erstellen Sie eine PHP+Nginx+Swoole+MySQL+Redis-Umgebung mit Docker
Artikel empfehlen
Erstellen, Einschränkungen und Löschen von Fremdschlüsseln in MySQL
Vorwort Ab MySQL-Version 3.23.44 unterstützen Inn...
Laden Sie VSCode herunter, installieren Sie es unter Linux und verwenden Sie die Programmierung, um die aktuelle Zeit auszugeben
Welchen Parameter verwendet der RPM-Befehl zum In...
Der gesamte Prozess der Realisierung der Website-Internationalisierung mit Vite2 und Vue3
Inhaltsverzeichnis Vorwort Installieren Sie vue-i...
Was tun, wenn Sie Ihr Linux/Mac MySQL-Passwort vergessen?
Was tun, wenn Sie Ihr Linux/Mac MySQL-Passwort ve...
Detaillierte Erklärung zur Verwendung struktureller Pseudoklassenselektoren und Pseudoelementselektoren in CSS3
Einführung in strukturelle Pseudoklassenselektore...
Beim Upgrade von MySQL auf 5.7 meldet WordPress beim Importieren von Daten den Fehler 1067
Ich habe kürzlich MySQL auf 5.7 aktualisiert und ...
Beispiel für die Implementierung von Unterstreichungseffekten mit CSS und JS
In diesem Artikel werden hauptsächlich zwei Arten...
Praktische Aufzeichnung der Handhabung von MySQL-Problemen beim automatischen Herunterfahren
Ich habe vor Kurzem jemandem bei einem Projekt ge...
Praktische Erfahrung mit der Implementierung von Nginx zum Weiterleiten von Anfragen basierend auf URLs
Vorwort Weil dies ein verteiltes Dateisystem ist,...
Der Unterschied zwischen den vier Dateierweiterungen .html, .htm, .shtml und .shtm
Viele Freunde, die gerade angefangen haben, Websei...
Webdesign: Implementierungstechniken für Webmusik
<br />Wenn Sie Musik in eine Webseite einfüg...
So schreiben Sie ein Bild als Hintergrund und einen Link (Hintergrundbild plus Link)
Dabei wird das Bild als Hintergrund verwendet und...
So verwenden Sie eine Karte, um die domänenübergreifende Nutzung mehrerer Domänennamen in Nginx zu ermöglichen
Die übliche Nginx-Konfiguration ermöglicht domäne...
WML-Tag-Zusammenfassung
Strukturbezogene Tags ----------------------------...
Kapseln Sie eine einfachste ErrorBoundary-Komponente zur Behandlung von React-Ausnahmen
Vorwort Ab React 16 wurde das Konzept der Fehlerg...