js-Operationsformular
Dieses Mal bringe ich Ihnen ein js-Operationsformular. Was sind die Vorsichtsmaßnahmen für das js-Operationsformular?
Umsetzungsideen:
1. Beim Hinzufügen: Ermitteln Sie die Anzahl der Zeilen in der aktuellen Liste und fügen Sie die nächste Zeile zur aktuellen Zeile hinzu
2. Verwenden Sie die Methode insertCell(), um eine Zeile hinzuzufügen, wobei der Index bei 0 beginnt.
; 3. Um einer neuen Zeile einen Typ hinzuzufügen und auf Ereignisse zu reagieren, verwenden Sie die Methode setAttribute(), ähnlich einem Schlüssel-Wert-Paar, und verwenden Sie die Methode appendChild(), um die Daten in einer neuen Zeile zu speichern
4 . Beim Löschen: Ermitteln Sie die aktuelle Anzahl der zu löschenden Zeilen und rufen Sie dann den übergeordneten Knoten ab. Löschen Sie die gesamte Zeile mit „remove()“, anstatt nur ein einzelnes Datenelement in einer Zeile zu löschen.
5. Wann Ändern: Rufen Sie den Zeilennummernindex der aktuell geänderten Zeile ab. Wenn Sie zum Ändern klicken, konvertieren Sie den Tabellenstatus in das Textformat und „Ändern“ wird in „OK“ geändert
Implementierungscode:
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
table{
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
width: 400px;
}
td,th{
border-right:1px solid #ccc ;
border-bottom: 1px solid #ccc;
}
</style>
<script>
function add(){
var table = document.getElementById("order");
var index = table.rows.length;//表格行数
var row = table.insertRow(index);//插入一个行并返回新一行
var c0 = row.insertCell(0);
var b0 = document.createElement("input");
b0.setAttribute("type","checkbox");
b0.setAttribute("onclick","seclect("+index+")");
b0.setAttribute("name","sel");
c0.appendChild(b0);
var c1 = row.insertCell(1);//在新一行插入一列，并返回新一列
c1.innerHTML = prompt("请输入商品名称","");
var c2 = row.insertCell(2);//在新一行插入一列，并返回新一列
c2.innerHTML = prompt("输入数量","");
var c3 = row.insertCell(3);//在新一行插入一列，并返回新一列
c3.innerHTML = prompt("输入价格","");
var c4 = row.insertCell(4);
var b1 = document.createElement("input");
b1.setAttribute("type","button");
b1.setAttribute("value","删除");
b1.setAttribute("onclick","del(this)");
var b2 = document.createElement("input");//创建按钮
b2.setAttribute("type","button");
b2.setAttribute("value","修改");
b2.setAttribute("style","margin-left: 5px");
b2.setAttribute("onclick","update("+index+")");
c4.appendChild(b1);//把按钮添加到操作的单元格中
c4.appendChild(b2);
}
function del(but){
//var table = document.getElementById("order");
but.parentNode.parentNode.remove();//根据节点的层级关系删除行
}
function update(index){
var table = document.getElementById("order");
//获得修改按钮
var cell=table.rows[index].cells[4];
cell.lastChild.setAttribute("value","确定");
//为按钮重新绑定事件
cell.lastChild.setAttribute("onclick","edit("+index+")");
//修改数量
var cellNumer = table.rows[index].cells[2];
var txt = document.createElement("input"); //创建一个文本框
txt.setAttribute("value",cellNumer.innerHTML);//设置文本框的值
txt.setAttribute("size",5);//文本框长度
cellNumer.innerHTML = "";//把单元格的数据清除
cellNumer.appendChild(txt); //把文本框加入到单元格
}
function edit(index){
var table = document.getElementById("order");
var cell = table.rows[index].cells[4];
cell.lastChild.setAttribute("value","修改");
cell.lastChild.setAttribute("onclick","update("+index+")");
//把单元格中的文本框删除
var cellNumer = table.rows[index].cells[2];
var num = cellNumer.firstChild.value;//取文本框的值
cellNumer.removeChild(cellNumer.firstChild);//删除文本框
cellNumer.innerHTML = num;
}
function allSelect(ch){
var item = document.getElementsByTagName("input"); //取所有的input标签
for(var i=0;i<item.length;i++){ //循环每一个
if(item[i].type==ch.type){ //判断每一个标签的类型是否为CheckBox
item[i].checked= ch.checked; //复选框的选中与全选的复选框选中相同
}
}
}
function seclect(sh){
varitem=document.getElementsByName("sel");
varall=document.getElementById("all");
vartag=true;
for(vari=0;i<item.length;i++){//判断是否全部选中
if(item[i].checked == false){
tag=false;
break;
}
}
all.checked=tag;
}
</script>
</head>
<body>
<center>
<tableid="order">
<tr>
<th>
<inputtype="checkbox"onclick="allSelect(this)"id="all"/>全选
</th>
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>操作</th>
</tr>
<tr>
<td><inputtype="checkbox"onclick="seclect(this)"name="sel"/></td>
<td>娃哈哈</td>
<td>10</td>
<td>2</td>
<td><inputvalue="删除"type="button"onclick="del(this)"style="margin-right:5px ;"/><inputvalue="修改"type="button"onclick="update(1)"/></td>
</tr>
</table>
<buttononclick="add()">添加商品</button>
</center>
</body>
</html>Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
JS-Implementierung des Bildkarussells auf mobilen Endgeräten
Detaillierte Erläuterung der Verwendung von Vue-Scope-Slots
Das obige ist der detaillierte Inhalt vonjs-Operationsformular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Schritte zum Anpassen des Formats von Bildern, die in PPT-Tabellen eingefügt werden
Mar 26, 2024 pm 04:16 PM
1. Erstellen Sie eine neue PPT-Datei und nennen Sie sie als Beispiel [PPT-Tipps]. 2. Doppelklicken Sie auf [PPT-Tipps], um die PPT-Datei zu öffnen. 3. Fügen Sie als Beispiel eine Tabelle mit zwei Zeilen und zwei Spalten ein. 4. Doppelklicken Sie auf den Rand der Tabelle. Die Option [Design] wird in der oberen Symbolleiste angezeigt. 5. Klicken Sie auf die Option [Schattierung] und dann auf [Bild]. 6. Klicken Sie auf [Bild], um das Dialogfeld mit den Fülloptionen mit dem Bild als Hintergrund aufzurufen. 7. Suchen Sie im Verzeichnis nach dem Fach, das Sie einfügen möchten, und klicken Sie auf „OK“, um das Bild einzufügen. 8. Klicken Sie mit der rechten Maustaste auf das Tabellenfeld, um das Einstellungsdialogfeld aufzurufen. 9. Klicken Sie auf [Zellen formatieren] und aktivieren Sie [Bilder als Schattierung anordnen]. 10. Stellen Sie [Zentrieren], [Spiegeln] und andere benötigte Funktionen ein und klicken Sie auf OK. Hinweis: Standardmäßig werden Bilder in die Tabelle eingefügt
So erstellen Sie eine Tabelle für die Umsatzprognose
Mar 20, 2024 pm 03:06 PM
Die Fähigkeit, Formulare geschickt erstellen zu können, ist nicht nur eine notwendige Fähigkeit für Buchhaltung, Personalwesen und Finanzen, sondern auch für viele Vertriebsmitarbeiter sehr wichtig. Denn die verkaufsbezogenen Daten sind sehr umfangreich und komplex und können nicht einfach in einem Dokument zur Erklärung des Problems erfasst werden. Damit sich mehr Vertriebsmitarbeiter mit der Tabellenerstellung in Excel auskennen, stellt der Herausgeber die Tabellenerstellungsthemen zur Umsatzprognose vor. Freunde in Not sollten sich das nicht entgehen lassen. 1. Öffnen Sie [Sales Forecast and Target Setting], xlsm, um die in jeder Tabelle gespeicherten Daten zu analysieren. 2. Erstellen Sie ein neues [Leeres Arbeitsblatt], wählen Sie [Zelle] und geben Sie [Etiketteninformationen] ein. [Ziehen] Sie nach unten und [füllen] Sie den Monat aus. Geben Sie [Sonstige] Daten ein und klicken Sie auf [
So legen Sie den WPS-Wert fest, um die Farbe entsprechend den Bedingungen automatisch zu ändern. Schritte zum Festlegen des WPS-Tabellenwerts, um die Farbe entsprechend den Bedingungen automatisch zu ändern
Mar 27, 2024 pm 07:30 PM
1. Öffnen Sie das Arbeitsblatt und suchen Sie die Schaltfläche [Start]-[Bedingte Formatierung]. 2. Klicken Sie auf „Spaltenauswahl“ und wählen Sie die Spalte aus, zu der die bedingte Formatierung hinzugefügt werden soll. 3. Klicken Sie auf die Schaltfläche [Bedingte Formatierung], um das Optionsmenü aufzurufen. 4. Wählen Sie [Bedingte Regeln hervorheben]-[Zwischen]. 5. Geben Sie die Regeln ein: 20, 24, dunkelgrüner Text mit dunkler Füllfarbe. 6. Nach der Bestätigung werden die Daten in der ausgewählten Spalte entsprechend den Einstellungen mit entsprechenden Zahlen, Text und Zellenfeldern eingefärbt. 7. Bedingte Regeln ohne Konflikte können wiederholt hinzugefügt werden, aber bei widersprüchlichen Regeln ersetzt WPS die zuvor festgelegten bedingten Regeln durch die zuletzt hinzugefügte Regel. 8. Fügen Sie die Zellspalten wiederholt nach [Zwischen] Regeln 20-24 und [Weniger als] 20 hinzu. 9. Wenn Sie die Regeln ändern müssen, können Sie die Regeln einfach löschen und dann zurücksetzen.
Tutorial zur PyCharm-Nutzung: Führt Sie ausführlich durch die Ausführung des Vorgangs
Feb 26, 2024 pm 05:51 PM
PyCharm ist eine sehr beliebte integrierte Entwicklungsumgebung (IDE) für Python. Sie bietet eine Fülle von Funktionen und Tools, um die Python-Entwicklung effizienter und komfortabler zu gestalten. Dieser Artikel führt Sie in die grundlegenden Betriebsmethoden von PyCharm ein und stellt spezifische Codebeispiele bereit, um den Lesern einen schnellen Einstieg zu erleichtern und sich mit der Bedienung des Tools vertraut zu machen. 1. Laden Sie PyCharm herunter und installieren Sie es. Zuerst müssen wir zur offiziellen Website von PyCharm gehen (https://www.jetbrains.com/pyc).
Wissen Sie, wie man eine Word-Tabelle zusammenfasst?
Mar 21, 2024 pm 01:10 PM
Manchmal stoßen wir auf Zählprobleme in Word-Tabellen. Wenn solche Probleme auftreten, kopieren die meisten Schüler die Word-Tabelle zur Berechnung in die Hand. Gibt es eine schnelle Möglichkeit, es zu berechnen? Natürlich gibt es das, tatsächlich lässt sich die Summe auch in Word berechnen. Wissen Sie also, wie es geht? Lasst uns heute gemeinsam einen Blick darauf werfen! Freunde in Not sollten es kurzerhand schnell abholen! Schrittdetails: 1. Zuerst öffnen wir die Word-Software auf dem Computer und öffnen das zu bearbeitende Dokument. (Wie im Bild gezeigt) 2. Als nächstes positionieren wir den Cursor auf der Zelle, in der sich der summierte Wert befindet (wie im Bild gezeigt), und klicken dann auf [Menüleiste
Schritte und Vorsichtsmaßnahmen für die Linux-Bereitstellung
Mar 14, 2024 pm 03:03 PM
Betriebsschritte und Vorsichtsmaßnahmen für LinuxDeploy LinuxDeploy ist ein leistungsstarkes Tool, mit dem Benutzer schnell verschiedene Linux-Distributionen auf Android-Geräten bereitstellen können, sodass Benutzer ein vollständiges Linux-System auf ihren Mobilgeräten erleben können. In diesem Artikel werden die Betriebsschritte und Vorsichtsmaßnahmen von LinuxDeploy ausführlich vorgestellt und spezifische Codebeispiele bereitgestellt, um den Lesern zu helfen, dieses Tool besser zu nutzen. Arbeitsschritte: LinuxDeploy installieren: Zuerst installieren
Was tun, wenn Sie vergessen, F2 für das Win10-Startkennwort zu drücken?
Feb 28, 2024 am 08:31 AM
Vermutlich haben viele Benutzer zu Hause mehrere ungenutzte Computer und haben das Einschaltpasswort völlig vergessen, weil sie längere Zeit nicht benutzt wurden. Sie möchten also wissen, was zu tun ist, wenn sie das Passwort vergessen? Dann lasst uns gemeinsam einen Blick darauf werfen. Was tun, wenn Sie vergessen, F2 für das Win10-Startkennwort zu drücken? 1. Drücken Sie den Netzschalter des Computers und drücken Sie dann beim Booten F2 (verschiedene Computermarken haben unterschiedliche Tasten zum Aufrufen des BIOS). 2. Suchen Sie in der BIOS-Schnittstelle nach der Sicherheitsoption (der Speicherort kann je nach Computermarke unterschiedlich sein). Normalerweise im Einstellungsmenü oben. 3. Suchen Sie dann die Option „SupervisorPassword“ und klicken Sie darauf. 4. Zu diesem Zeitpunkt kann der Benutzer sein Passwort sehen und gleichzeitig die Option „Aktiviert“ daneben finden und auf „Dis“ umstellen.
So wechseln Sie Tabellen in Word horizontal und vertikal
Mar 20, 2024 am 09:31 AM
Word-Software ist für uns unverzichtbar und muss häufig verwendet werden. Ich habe bereits gelernt, wie man Tabellen mit Word-Software bearbeitet. Wenn ich jedoch versehentlich die Tabelle in horizontaler und vertikaler Richtung bearbeite, möchte ich keine Zeit damit verschwenden -Ist es beim Erstellen möglich, die horizontale und vertikale Richtung des Wolltuchs zu ändern? Die Antwort lautet natürlich: Ja. Als nächstes erklärt Ihnen der Redakteur ausführlich, wie Sie Tabellen in Word horizontal und vertikal austauschen. Zuerst müssen wir die Zeilen und Spalten der folgenden Word-Tabelle vertauschen. Dazu müssen wir zunächst die Tabelle vollständig auswählen, dann mit der rechten Maustaste klicken und die Kopierfunktion auswählen. Schritt 2: Nachdem wir „Kopieren“ ausgewählt haben, minimieren wir Word, öffnen dann eine Excel-Tabelle, klicken mit der rechten Maustaste, wählen „Einfügen“ und fügen sie in Exc ein
