Verwenden Sie jQuery, um bearbeitbare tables_jquery zu implementieren

Heute haben wir das Beispiel der Verwendung von jQuery zum Implementieren einer bearbeitbaren Tabelle kennengelernt. Die Anforderungen für dieses Beispiel lauten wie folgt: Klicken Sie auf eine Zelle in der Vordergrundtabelle, um deren Inhalt zu ändern, drücken Sie die Eingabetaste, um den geänderten Inhalt zu speichern, und esc, um den gespeicherten Inhalt rückgängig zu machen. Prinzip: Wenn Sie auf eine Client-Tabellenzelle klicken, fügen Sie ein Textfeld in die Zelle ein, weisen Sie den ursprünglichen Inhalt in der Zelle dem Textfeld zu und ändern Sie dann den Inhalt des Textfelds weiter. Weisen Sie den Inhalt des Textfelds nach der Änderung erneut der Zelle zu.

Quellcode:

Frontend-Code:

Code kopieren Der Code lautet wie folgt: html Content-Type" content="text/html; charset=utf-8"/> jq2 – bearbeitbare Tabelle src="js/editTable.js"> &lt ; /script>--%> 🎜 > ;/ tr> Name ; 000001 > 000002 > ; >

Code kopieren

Der Code lautet wie folgt:

body { } table { border:1px solid #000000; border-collapse:collapse ;/*Cell border merging*/ width:400px } table td { border:1px solid #000000; width:50%; } table th { border:1px solid #000000; tbody th { background -color:#426fae; }

JQuery-Code

Code kopieren

Der Code ist wie folgt: $(function () { //Alle geraden Zeilen in der Tabelle außer dem ersten tr finden //Verwenden Sie even, um alle tr-Elemente durch tbody tr zurückzugeben $( "tbody tr:even").css("background-color", "#ece9d8");//Alle Schülernummernzellen finden var numId = $("tbody td:even");

//Mausklickereignis für die Zelle registrieren numId.click(function () { //Suchen Sie den td, der dem aktuellen Mausklick entspricht. Dies entspricht dem td, der auf reagiert hat click var tdObj = $(this); //Bestimmen Sie, ob in td ein Textfeld vorhanden ist if (tdObj.children("input").length>0) { return false ; } //Inhalt in der Tabelle abrufen var text = tdObj.html(); //Inhalt in td löschen tdObj.html(""); 🎜>//Textfeld erstellen //Entfernen Sie den Rand des Textfelds //Stellen Sie die Schriftgröße im Textfeld so ein, dass sie mit dem Text in der Tabelle übereinstimmt //Legen Sie den Hintergrund fest Die Farbe des Textfelds muss mit der Hintergrundfarbe der Tabelle übereinstimmen. // Die Breite des Textfelds entspricht der Breite von td. // Geben Sie den Wert in td in das Textfeld ein //Fügen Sie das Textfeld in td ein var inputObj = $(" ").css("border-width", "0").css("font -size", tdObj.css("font-size")).css("background-color ", tdObj.css("background-color")).width(tdObj.width()).val(text). appendTo(tdObj); //Nachdem das Textfeld eingefügt wurde, erhält es zuerst den Fokus und wählt es dann aus inputObj.trigger("focus").trigger("select") //Der Klick Ereignis kann nicht ausgelöst werden, nachdem das Textfeld eingefügt wurde inputObj.click(function () { return false; }); //Verarbeiten Sie die Operation der Eingabe- und Esc-Tasten für den Text box inputObj.keyup(function (event) { //Den Tastenwert der aktuell gedrückten Tastatur abrufen var keycode = event.which; //Wagenrücklauf verarbeiten if ( keycode==13) { //Den Inhalt im aktuellen Textfeld abrufen var inputtext = $(this).val (); //Ändere den Inhalt in td an den Inhalt des Textes box tdObj.html(inputtext); } //Verarbeiten Sie den Inhalt von esc if (keycode== 27) { //Stellen Sie den Inhalt in td auf den ursprünglichen Inhalt wieder her tdObj.html(text); }); });

Zusammenfassung: Wissenspunkte, die durch gewonnen werden können Aus diesem Beispiel lernen:

1. HTML 1.table kann den Kopf und den Textkörper enthalten

2. Der Inhalt des Tabellenkopfes kann im platziert werden 3. Tabelle{} Diese Schreibmethode wird als Label-Selektor bezeichnet und kann Auswirkungen auf die gesamte Tabelle haben.

4.table td{} repräsentiert alle in der Tabelle enthaltenen tds.

2. In Bezug auf jquery kann

$() 4 verschiedene Parameter in die Klammern setzen

1. Setzen Sie den Parameter direkt in die Funktion, um anzuzeigen, dass die Seite geladen ist : Zum Beispiel die obige Beispielzeile 1 im JQuery-Code $(function(){})

2 Der Parameter kann ein CSS-Klassenselektor sein und wird in ein JQuery-Objekt gepackt. Zum Beispiel: Zeile 4 des JQuery-Codes im obigen Beispiel $("tbody tr:even")

3 Wenn der Parameter HTML-Text ist, können Sie einen Dom-Knoten erstellen und ihn in ein JQuery-Objekt packen . Beispiel: Zeile 27 des JQuery-Codes im obigen Beispiel $(" ")

4 Der Parameter kann ein DOM-Objekt sein das Dom-Objekt in ein JQuery-Objekt. Zeile 11 des JQuery-Codes im obigen Beispiel var tdObj = $(this)

Das JQuery-Objekt in diesem Beispiel

1. Fügen Sie CSS-Attribute nach dem JQuery-Objekt hinzu, um die CSS-Attribute festzulegen der Knoten. Beispielsweise enthält Zeile 4 im JQuery-Code im obigen Beispiel $("tbody tr:even").css("background-color", "#ece9d8");

2.jquery-Objektinhalt eine Auswahl Der dem Gerät entsprechende DOM-Knoten wird in einem Array gespeichert.

3. Durch Hinzufügen der HTML-Methode nach dem JQuery-Objekt kann der HTML-Inhalt des Knotens festgelegt oder abgerufen werden. Zum Beispiel Zeile 17 des JQuery-Codes im obigen Beispiel var text = tdObj.html()

4 Durch Hinzufügen der val-Methode nach dem JQuery-Objekt kann der Wert des Knotens abgerufen oder festgelegt werden. Im obigen Beispiel lautet Zeile 41 des JQuery-Codes beispielsweise var inputtext = $(this).val()

5 Durch Hinzufügen der Breitenmethode nach dem JQuery-Objekt kann die Breite von a festgelegt oder abgerufen werden Knoten. Zeile 27 des JQuery-Codes im obigen Beispiel lautet beispielsweise tdObj.width()

6. Durch Hinzufügen der appendTo-Methode nach dem JQuery-Objekt kann ein Knoten an alle untergeordneten Knoten eines anderen Knotens angehängt werden. Im obigen Beispiel kann beispielsweise Zeile 27 appendTo(tdObj) im JQuery-Code

7 das Hinzufügen der Trigger-Methode nach dem JQuery-Objekt auslösen. Im obigen Beispiel kann beispielsweise Zeile 29 des JQuery-Codes inputObj.trigger("focus").trigger("select")

8 durch Hinzufügen der Kindermethode nach dem JQuery-Objekt ermittelt werden eines bestimmten Knotens, mit dem Parameter formuliert werden können, um den Inhalt untergeordneter Knoten einzuschränken. Zum Beispiel Zeile 13 des JQuery-Codes im obigen Beispiel tdObj.children("input").length

9 Wenn das vom Selektor zurückgegebene JQuery-Objekt mehrere Dom-Knoten enthält, registrieren Sie ein ähnliches Klickereignis Wenn Sie dieses Objekt verwenden, werden alle DOM-Knoten für dieses Ereignis verwendet. Beispiel: Zeile 9 numId.click im JQuery-Code im obigen Beispiel;