Chciałbym, aby niektóre komórki tabeli html były edytowalne, po prostu kliknij dwukrotnie komórkę, wprowadź tekst, a zmiany zostaną wysłane na serwer. Nie chcę używać niektórych zestawów narzędzi, takich jak siatka danych dojo. Ponieważ zapewnia kilka innych funkcji. Czy możesz podać mi fragment kodu lub porady, jak go zaimplementować?
źródło
contenteditable
div za każdym razem, gdy tworzysz nowy<td>
. W przeciwnym razie, jak wspomniano w poście, możesz dodaćcontenteditable
komórki, wiersze lub tabelę.HTML5 obsługuje treść z możliwością edycji,
Edycja zewnętrzna
Cytując wpis mdn na contenteditable
źródło
true
, niezależnie od nazwy. Na przykład<td contenteditable='contenteditable'></td>
.Mam trzy podejścia, tutaj możesz użyć obu
<input>
lub<textarea>
zgodnie ze swoimi wymaganiami.1. Użyj Input in
<td>
.Używanie
<input>
elementu we wszystkich<td>
s,Możesz także zmienić rozmiar wejścia do jego rozmiaru
td
. dawny.,Możesz dodatkowo zmienić kolor obramowania pola wprowadzania, gdy nie jest ono edytowane.
2. Użyj
contenteditable='true'
atrybutu. (HTML5)Jeśli jednak chcesz użyć
contenteditable='true'
, możesz również zapisać odpowiednie wartości w bazie danych. Możesz to osiągnąć dzięki Ajax.Można dołączyć keyhandlers
keyup
,keydown
,keypress
etc do<td>
. Ponadto dobrze jest użyć opóźnienia () z tymi zdarzeniami, gdy użytkownik ciągle wpisuje, zdarzenie ajax nie będzie uruchamiane przy każdym naciśnięciu klawisza przez użytkownika. na przykład,3. Dołącz
<input>
do<td>
po kliknięciu.Dodaj element wejściowy
td
po<td>
kliknięciu, zamień jego wartość zgodnie z wartościątd
's. Kiedy dane wejściowe są zamazane, zmień wartość td na wartość wejścia. Wszystko to za pomocą javascript.źródło
contenteditable=true
czy możesz mi w tym pomóc?To jest przykład do uruchomienia.
źródło
Możesz użyć X-editable https://vitalets.github.io/x-editable/ jego niesamowitej biblioteki z bootstrap
źródło
Wypróbuj ten kod.
Możesz również odwiedzić ten link, aby uzyskać więcej informacji:
źródło
Po prostu wstaw
<input>
element<td>
dynamicznie, po kliknięciu komórki. Tylko prosty HTML i Javascript. Nie ma potrzebycontentEditable
,jquery
,HTML5
https://Jsfiddle.net/gsivanov/38tLqobw/2/
źródło
Używam tego do edytowalnego pola
źródło
Jeśli używasz Jquery, ta wtyczka jest prosta, ale jest dobra
https://github.com/samuelsantosdev/TableEdit
źródło
To jest najważniejsza kwestia, chociaż nie musisz robić tego bałaganu w kodzie. Zamiast tego możesz po prostu iterować przez wszystkie
<td>
i dodać<input>
atrybuty, a na koniec wstawić wartości.źródło
to jest rzeczywiście tak proste, to jest mój przykład HTML, jQuery .. i działa jak urok, buduję cały kod, używając próbki danych json online. Twoje zdrowie
<< HTML >>
<< jQuery >>
źródło