Ich möchte einige Zellen der HTML-Tabelle bearbeitbar machen, einfach auf eine Zelle doppelklicken, Text eingeben und die Änderungen können an den Server gesendet werden. Ich möchte einige Toolkits wie das Dojo-Datenraster nicht verwenden. Weil es einige andere Funktionen bietet. Würden Sie mir ein Code-Snippet oder Ratschläge zur Implementierung geben?
quelle
contenteditable
div nur hinzufügen, wenn Sie ein neues erstellen<td>
. Andernfalls können Sie, wie im Beitrag erwähnt,contenteditable
die Zellen, Zeilen oder Tabellen hinzufügen .HTML5 unterstützt inhaltsbearbeitbare,
Bearbeitung durch Dritte
Um den MDN-Eintrag auf contenteditable zu zitieren
quelle
true
, sondern der Name. Zum Beispiel<td contenteditable='contenteditable'></td>
.Ich habe drei Ansätze. Hier können Sie beide
<input>
oder<textarea>
gemäß Ihren Anforderungen verwenden.1. Verwenden Sie Input in
<td>
.Mit
<input>
Elemente in allen<td>
s,Möglicherweise möchten Sie auch die Größe der Eingabe auf die Größe ändern
td
. Ex.,Sie können zusätzlich die Farbe des Rahmens des Eingabefelds ändern, wenn es nicht bearbeitet wird.
2. Verwenden Sie das
contenteditable='true'
Attribut. (HTML5)Wenn Sie jedoch verwenden möchten, möchten
contenteditable='true'
Sie möglicherweise auch die entsprechenden Werte in der Datenbank speichern. Sie können dies mit Ajax erreichen.Sie können keyhandlers befestigen
keyup
,keydown
,keypress
etc zu der<td>
. Es ist auch gut, bei diesen Ereignissen eine Verzögerung () zu verwenden, wenn der Benutzer kontinuierlich tippt. Das Ajax-Ereignis wird nicht bei jedem Tastendruck ausgelöst. beispielsweise,3. Anhängen
<input>
an,<td>
wenn darauf geklickt wird.Fügen Sie das Eingabeelement hinzu,
td
wenn Sie auf<td>
klicken, und ersetzen Sie seinen Wert durch dentd
Wert des. Wenn die Eingabe unscharf ist, ändern Sie den Wert von `td mit dem Wert der Eingabe. All dies mit Javascript.quelle
contenteditable=true
du mir bitte dabei helfen?Dies ist ein lauffähiges Beispiel.
quelle
Sie können x-editable https://vitalets.github.io/x-editable/ seine fantastische Bibliothek von Bootstrap verwenden
quelle
Versuchen Sie diesen Code.
Sie können diesen Link auch für weitere Details besuchen:
quelle
Fügen Sie das
<input>
Element einfach<td>
dynamisch ein, wenn Sie auf die Zelle klicken. Nur einfaches HTML und Javascript. Keine Notwendigkeit fürcontentEditable
,jquery
,HTML5
https://Jsfiddle.net/gsivanov/38tLqobw/2/
quelle
Ich benutze dies für bearbeitbare Felder
quelle
Wenn Sie Jquery verwenden, ist dieses Plugin einfach, aber gut
https://github.com/samuelsantosdev/TableEdit
quelle
Dies ist der wesentliche Punkt, obwohl Sie den Code nicht so chaotisch machen müssen. Stattdessen können Sie einfach alle durchlaufen
<td>
und die<input>
mit den Attributen hinzufügen und schließlich die Werte eingeben.quelle
Das ist eigentlich so einfach, das ist mein HTML-, jQuery-Beispiel. Und es funktioniert wie ein Zauber. Ich erstelle den gesamten Code mithilfe eines Online-JSON-Datenbeispiels. Prost
<< HTML >>
<< jQuery >>
quelle