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
So erstellen Sie mit CSS eine Bildlaufleiste mit fester Navigation und Links- und Rechtsverschiebung
Wie oben gezeigt ist die Navigation oben fixiert ...
MySQL-Schleife fügt zig Millionen Daten ein
1. Erstellen Sie eine Testtabelle Tabelle `mysql_...
Detaillierte Schritte zur Installation und Konfiguration von MySQL 5.6.21
1. Übersicht MySQL-Version: 5.6.21 Download-Adres...
Zusammenfassung von 6 Methoden zur Anzeige von Linux-Protokollen
Als Backend-Programmierer haben Sie an vielen Ste...
Den praktischen Wert der CSS-Eigenschaft *-gradient erkunden
Lassen Sie mich zunächst eine interessante Eigens...
Eine Codezeile löst verschiedene IE-Kompatibilitätsprobleme (IE6-IE10)
x-ua-compatible wird verwendet, um das Modell für...
Win10 Installation von MySQL 5.7 MSI-Version des Tutorials mit Bildern und Text
Ich habe es im MSI-Format installiert, hauptsächl...
HTML-Sonderzeichen-Konvertierungstabelle
Charakter Dezimal Zeichennummer Entitätsname --- ...
Ein umfassendes Verständnis der funktionalen Komponenten von Vue.js
Inhaltsverzeichnis Vorwort Funktionale React-Komp...
CSS3 Flexible Box Flex, um ein dreispaltiges Layout zu erreichen
Wie der Titel schon sagt: Die Höhe ist bekannt, d...
Erläuterung verschiedener Möglichkeiten zum Ausführen von Tomcat unter Linux
Tomcat unter Linux starten und herunterfahren Sta...
Grafisches Tutorial zur Installation und Konfiguration von Ubuntu 18.0.4 MySQL 8.0.20
Die Installations- und Konfigurationsmethode von ...
Detaillierte Erläuterung des React setState-Datenaktualisierungsmechanismus
Inhaltsverzeichnis Warum setState verwenden? Verw...
Beispielcode zur Implementierung der olympischen Ringe mit reinem HTML+CSS
Rendern Code - Nehmen Sie die blauen und gelben R...
CSS bewirkt, dass sich die Farbe der gesamten Linie ändert, wenn die Maus darauf platziert wird
Zusammenfassung: Im Folgenden finden Sie eine Met...