Web-Frontend
js-Tutorial
JQuery implementiert eine Tabellenfunktion, die in Echtzeit bearbeitet werden kann
JQuery implementiert eine Tabellenfunktion, die in Echtzeit bearbeitet werden kann
Dieses Mal bringe ich Ihnen JQuery zum Implementieren der Tabellenfunktion, die in Echtzeit bearbeitet werden kann. Was sind die Vorsichtsmaßnahmen für JQuery, um die Tabellenfunktion zu implementieren, die in Echtzeit bearbeitet werden kann ist ein praktischer Fall, werfen wir einen Blick darauf. Der endgültige Effekt, den wir erreichen möchten, ist wie folgt:
Wenn Sie auf die Spalte mit der Schülernummer klicken, können Sie sie bearbeiten:
Wenn Sie auf ESC klicken, wird der Vorgang abgebrochen. Wenn Sie auf die Eingabetaste klicken, wird die Änderung wirksam (keine Interaktion mit dem Hintergrund)
Der Seitencode lautet wie folgt (asp.net):
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EditTable.aspx.cs" Inherits="EditTable" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="css/eidtTable.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="js/eidtTable.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <p> <table> <thead> <tr> <th colspan="2">可编辑的表格</th> </tr> </thead> <tbody> <tr> <th>学号</th> <th>姓名</th> </tr> <tr> <td class="editTd">00001</td> <td>小明</td> </tr> <tr> <td class="editTd">00001</td> <td>小明</td> </tr> <tr> <td class="editTd">00001</td> <td>小明</td> </tr> <tr> <td class="editTd">00001</td> <td>小明</td> </tr> </tbody> </table> </p> </form> </body> </html>
CSS (eidtTable.css)
table
{
border:1px solid black;
border-collapse:collapse;
width:500px;
}
table th
{
border:1px solid black;
width:50%;
}
table td
{
border:1px solid black;
width:50px;
}
tbody th
{
background-color:#A3BAE9
}JS(eidtTable.js):
/// <reference path="jquery-1.9.1.min.js" />
//$(document).ready(function () {
// alert('test');
//});
//简便的写法
$(function () {
$("tr:odd").css("background-color", "#ECE9D8");
var objTd = $(".editTd");
objTd.click(function () {
var text = $(this).html();
var objThisTd = $(this);
//解决点击文本框和td中间的空隙还是会出问题 这个问题
if (objThisTd.children("input").length > 0) {
return false;
}
var inputText = $("<input value='test' type='text'/>");
inputText.width(objTd.width()).css("font-size", "16px").css("background-color", objTd.css("background-color")).css("border-width", "0").val(text);
objThisTd.html("");
inputText.appendTo(objThisTd);
inputText.trigger("focus").trigger("select");
inputText.click(function () {
return false;
});
//这里采用的keydown事件，我试过用keyup事件无法屏蔽浏览器的回车页面提交事件
inputText.keydown(function (event) {
//alert(event.keyCode);
var keycode = event.which;
if (keycode == 13) {
objThisTd.html($(this).val());
//return false;
}
if (keycode == 27) {
objThisTd.html(text);
}
});
});
});Ich glaube, dass Sie die Methode nach dem Lesen beherrschen Der Fall in diesem Artikel ist für weitere spannende Informationen interessant. Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Detaillierte Erklärung, wie jquery mit Daten in Tabellen arbeitet
Detaillierte Erklärung der von die Tabellensortierkomponente Tablesorter
Das obige ist der detaillierte Inhalt vonJQuery implementiert eine Tabellenfunktion, die in Echtzeit bearbeitet werden kann. 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
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
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
Wie bearbeite ich Dokumente in Tencent Docs? -Tencent Document Editing Document Tutorial Guide
Mar 19, 2024 am 08:19 AM
Weiß jemand, wie man Dokumente in Tencent Docs bearbeitet? Wenn Sie es nicht wissen, wird der Herausgeber Ihnen heute ausführliche grafische Erklärungen zum Bearbeiten von Dokumenten in Tencent Docs geben. Detaillierte grafische Erläuterung der Bearbeitung von Dokumenten in Tencent Documents 1. Geben Sie zunächst direkt Tencent Documents ein (wenn Sie es nicht haben, laden Sie es jetzt herunter!) und melden Sie sich direkt an (zwei Anmeldemethoden für QQ und TIM werden unterstützt). 2. Nach der Anmeldung , klicken Sie oben rechts auf „Hinzufügen“ Nr., erstellen Sie direkt Online-Dokumente, Online-Formulare, neue Ordner usw. 3. Geben Sie dann die Informationen entsprechend Ihren Anforderungen ein!
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 das Word-Dokument nicht bearbeitet werden kann?
Mar 19, 2024 pm 09:37 PM
Nachdem wir das Dokument bearbeitet haben, speichern wir es, um es beim nächsten Mal einfacher bearbeiten und ändern zu können. Manchmal können wir es direkt ändern, nachdem wir auf das bearbeitete Dokument geklickt haben, aber manchmal erfolgt aus einem unbekannten Grund keine Reaktion, egal wie wir Klicken Sie auf das Word-Dokument und der Befehl wird nicht ausgeführt. Was soll ich tun, wenn das Word-Dokument nicht bearbeitet werden kann? Machen Sie sich keine Sorgen, der Editor hilft Ihnen bei der Lösung dieses Problems. Schauen wir uns den Vorgang an. Nach dem Öffnen des Word-Dokuments wird beim Bearbeiten von Text auf der rechten Seite der Seite die Aufforderung „Bearbeitung einschränken“ angezeigt, wie in der Abbildung unten dargestellt. 2. Sie müssen die Bearbeitung abbrechen und das festgelegte Passwort kennen. Klicken Sie unter der Popup-Eingabeaufforderung auf „Schutz beenden“, wie in der Abbildung unten gezeigt. 3. Geben Sie dann das Passwort in das Dialogfeld „Dokumentschutz aufheben“ ein und klicken Sie auf „OK“, wie in der Abbildung unten gezeigt.
Huawei Mate60 Pro Screenshot-Bedienschritte teilen
Mar 23, 2024 am 11:15 AM
Mit der Beliebtheit von Smartphones ist die Screenshot-Funktion zu einer der wesentlichen Fähigkeiten für die tägliche Nutzung von Mobiltelefonen geworden. Als eines der Flaggschiff-Handys von Huawei hat die Screenshot-Funktion des Huawei Mate60Pro natürlich große Aufmerksamkeit bei den Nutzern auf sich gezogen. Heute werden wir die Screenshot-Bedienungsschritte des Huawei Mate60Pro-Mobiltelefons teilen, damit jeder bequemer Screenshots machen kann. Erstens bietet das Huawei Mate60Pro-Mobiltelefon eine Vielzahl von Screenshot-Methoden, und Sie können die Methode auswählen, die Ihren persönlichen Gewohnheiten entspricht. Im Folgenden finden Sie eine detaillierte Einführung in mehrere häufig verwendete Abfangfunktionen:
jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite
Feb 28, 2024 pm 09:06 PM
Titel: jQuery-Tipps: Ändern Sie schnell den Text aller Tags auf der Seite. In der Webentwicklung müssen wir häufig Elemente auf der Seite ändern und bedienen. Wenn Sie jQuery verwenden, müssen Sie manchmal den Textinhalt aller a-Tags auf der Seite gleichzeitig ändern, was Zeit und Energie sparen kann. Im Folgenden wird erläutert, wie Sie mit jQuery den Text aller Tags auf der Seite schnell ändern können, und es werden spezifische Codebeispiele angegeben. Zuerst müssen wir die jQuery-Bibliotheksdatei einführen und sicherstellen, dass der folgende Code in die Seite eingefügt wird: <
Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern
Feb 28, 2024 pm 05:42 PM
Titel: Verwenden Sie jQuery, um den Textinhalt aller Tags zu ändern. jQuery ist eine beliebte JavaScript-Bibliothek, die häufig zur Verarbeitung von DOM-Operationen verwendet wird. Bei der Webentwicklung müssen wir häufig den Textinhalt des Link-Tags (eines Tags) auf der Seite ändern. In diesem Artikel wird erläutert, wie Sie mit jQuery dieses Ziel erreichen, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir die jQuery-Bibliothek in die Seite einführen. Fügen Sie den folgenden Code in die HTML-Datei ein:
Anleitung zur Änderung des Discuz-Domänennamens
Mar 09, 2024 pm 04:36 PM
Bedienungsanleitung zur Änderung des Discuz-Domänennamens Bei der Verwendung des Discuz-Forumsystems müssen wir manchmal den Domänennamen des Forums ändern. Dies kann daran liegen, dass der Domänenname geändert werden muss oder einige Probleme bei der Auflösung von Domänennamen behoben werden müssen. In diesem Artikel wird detailliert beschrieben, wie der Domänenname im Discuz-Forumsystem geändert wird, und es werden einige spezifische Codebeispiele aufgeführt. 1. Daten sichern Bevor wir einen Vorgang durchführen, müssen wir die Daten sichern, um Datenverlust aufgrund von Betriebsfehlern zu verhindern. In Discuz können Sie die Datensicherung im Hintergrund nutzen
PHP-String-Manipulation: eine praktische Möglichkeit, Leerzeichen effektiv zu entfernen
Mar 24, 2024 am 11:45 AM
PHP-String-Operation: Eine praktische Methode zum effektiven Entfernen von Leerzeichen Bei der PHP-Entwicklung kommt es häufig vor, dass Sie Leerzeichen aus einem String entfernen müssen. Das Entfernen von Leerzeichen kann die Zeichenfolge sauberer machen und die nachfolgende Datenverarbeitung und -anzeige erleichtern. In diesem Artikel werden mehrere effektive und praktische Methoden zum Entfernen von Leerzeichen vorgestellt und spezifische Codebeispiele angehängt. Methode 1: Verwenden Sie die in PHP integrierte Funktion trim(). Die in PHP integrierte Funktion trim() kann Leerzeichen an beiden Enden der Zeichenfolge entfernen (einschließlich Leerzeichen, Tabulatoren, Zeilenumbrüche usw.), was sehr praktisch und einfach ist benutzen.
