Cum se face o celulă de tabel HTML editabilă? (Programare, Html, Editor, Tabel Html, Celulă)

wqfeng a intrebat.

Aș dori să fac unele celule ale tabelului html editabile, pur și simplu faceți dublu clic pe o celulă, introduceți un text și modificările pot fi trimise la server. Nu vreau să folosesc unele toolkits cum ar fi dojo data grid. Pentru că oferă unele alte caracteristici. Mi-ați putea oferi un fragment de cod sau sfaturi despre cum să îl implementez?

12 răspunsuri
Brett Zamir

Puteți utiliza atributul contenteditable pe celulele, rândurile sau tabelul în cauză.

Actualizat pentru compatibilitate cu IE8

<table>
<tr><td><div contenteditable>I'm editable</div></td><td><div contenteditable>I'm also editable</div></td></tr>
<tr><td>I'm not editable</td></tr>
</table>

Rețineți doar că dacă faceți tabelul editabil, cel puțin în Mozilla, puteți șterge rânduri, etc.

De asemenea, ar trebui să verificați dacă browserele publicului dumneavoastră țintă acceptă acest atribut.

În ceea ce privește ascultarea modificărilor (astfel încât să puteți trimite la server), consultați evenimentele de modificare contenteditable

Comentarii

  • Vă mulțumim. Se pare că contenteditable este acceptat în HTML5. Eu caut o soluție care să funcționeze și în html4. –  > Por wqfeng.
  • Deși este în cele din urmă codificat în standard cu HTML5, era deja bine suportat în majoritatea browserelor mai vechi (cu excepția suportului doar parțial în FF3): caniuse.com/contenteditable (deși nu și în dispozitivele mobile) –  > Por Brett Zamir.
  • Un sfat grozav. Îl căutam și eu. Vă mulțumesc. –  > Por praneybehl.
  • Vă rog să-mi explicați de ce trebuie să existe un DIV în celulă pentru a face să funcționeze pentru IE. Folosind <td contenteditable=true> nu face ca celula să fie editabilă în IE. Am crezut că contenteditable este pentru orice element HTML? –  > Por Rafael.
  • Dacă aveți nevoie de compatibilitate cu IE8, trebuie doar să adăugați elementul contenteditable div ori de câte ori creați un nou element <td>. În caz contrar, așa cum se menționează în post, puteți adăuga div-ul contenteditable pe celule, rânduri sau tabel. –  > Por Brett Zamir.
vardhan

HTML5 suportă contenteditable,

<table border="3">
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
</tbody>
</table>

editarea de către o terță parte

Pentru a cita intrarea mdn privind contenteditable

Atributul trebuie să ia una dintre următoarele valori:

  • true sau șirul gol, care indică faptul că elementul trebuie să fie editabil;

  • false, care indică faptul că elementul nu trebuie să fie editabil.

În cazul în care acest atribut nu este setat, valoarea sa implicită este moștenită de la elementul său părinte.

Acest atribut este un atribut enumerat și nu unul boolean. Acest lucru înseamnă că utilizarea explicită a uneia dintre valorile true, false sau a șirului gol este obligatorie și că nu este permisă utilizarea abrevierii ….

// wrong not allowed
<label contenteditable>Example Label</label> 

// correct usage
<label contenteditable="true">Example Label</label>.

Comentarii

  • Ciudat. De obicei, valoarea atributului nu este trueci este oricare ar fi numele acestuia. De exemplu, <td contenteditable='contenteditable'></td>. –  > Por trysis.
  • Stări posibile ale mulțumitoare: contenteditable**=”” sau **contenteditable**=”true” Indică faptul că elementul este editabil. **contenteditable**=”false” Indică faptul că elementul nu este editabil. **contenteditable**=”inherit” Indică faptul că elementul este editabil dacă elementul său părinte imediat este editabil. Aceasta este valoarea implicită. Atunci când adăugați **contenteditable la un element, browserul va face ca acel element să fie editabil. În plus, orice copil al elementului respectiv va deveni, de asemenea, editabil, cu excepția cazului în care elementele copil sunt în mod explicit **contenteditable**=”false”. –  > Por vardhan.
  • Știu asta, doar că mi s-a părut ciudat, deoarece majoritatea celorlalte atribute nu au această sintaxă. –  > Por trysis.
Bhavesh G

Am trei abordări, aici le puteți folosi pe amândouă <input> sau <textarea> în funcție de cerințele dumneavoastră.

1. Utilizați intrarea în <td>.

Folosind <input> element în toate <td>s,

<tr><td><input type="text"></td>....</tr>

De asemenea, este posibil să doriți să redimensionați intrarea la dimensiunea elementului său td. ex..,

input { width:100%; height:100%; }

În plus, puteți schimba culoarea marginii căsuței de introducere atunci când aceasta nu este editată.

2. Utilizați contenteditable='true' atribut. (HTML5)

Cu toate acestea, dacă doriți să utilizați contenteditable='true', este posibil să doriți, de asemenea, să salvați valorile corespunzătoare în baza de date. Puteți realiza acest lucru cu ajax.

Puteți atașa keyhandler keyup, keydown, keypress etc. la <td>. De asemenea, este bine să folosiți un delay() cu aceste evenimente atunci când utilizatorul tastează continuu, evenimentul ajax nu se va declanșa la fiecare tastă apăsată de utilizator. de exemplu,

$('table td').keyup(function() {
  clearTimeout($.data(this, 'timer'));
  var wait = setTimeout(saveData, 500); // delay after user types
  $(this).data('timer', wait);
});
function saveData() {
  // ... ajax ...
}

3. Adăugați <input> la <td> atunci când se face clic pe el.

Adăugați elementul de intrare în td atunci când elementul <td> este apăsat, înlocuiți valoarea acestuia în funcție de td‘s value. Atunci când elementul de intrare este estompat, schimbați valoarea lui `td cu valoarea elementului de intrare. Toate acestea cu javascript.

Comentarii

  • Din păcate, ați ratat partea cu întrebarea „Cum să faci celula tabelului HTML editabilă?”, mai ales în exemplul 2. Utilizatorul a întrebat cum se poate realiza acest lucru la dublu clic. Puteți fi amabil să implementați partea lipsă? –  > Por Robert.
  • @BhaveshGangani am o problemă cu contenteditable=true mă puteți ajuta în acest sens, vă rog? – utilizator10705797
  • Sigur că pot încerca. Aveți un js fiddle pentru asta? –  > Por Bhavesh G.
ACE Arthur

Acesta este un exemplu executabil.

Ahmad Halah

Puteți utiliza x-editable https://vitalets.github.io/x-editable/este o bibliotecă minunată de la bootstrap

user3751006

Încercați acest cod.

$(function () {
 $("td").dblclick(function () {
    var OriginalContent = $(this).text();

    $(this).addClass("cellEditing");
    $(this).html("<input type="text" value="&quot; + OriginalContent + &quot;" />");
    $(this).children().first().focus();

    $(this).children().first().keypress(function (e) {
        if (e.which == 13) {
            var newContent = $(this).val();
            $(this).parent().text(newContent);
            $(this).parent().removeClass("cellEditing");
        }
    });

 $(this).children().first().blur(function(){
    $(this).parent().text(OriginalContent);
    $(this).parent().removeClass("cellEditing");
 });
 });
});

Puteți vizita, de asemenea, acest link pentru mai multe detalii :

Comentarii

  • Pentru a evita problemele în IE cu $(this).children().first().focus(); – stackoverflow.com/a/3562193/5234417 –  > Por Alexei Zababurin.
gsivanov

Doar introduceți <input> element în <td> dinamic, la un clic pe celulă. Doar HTML și Javascript simple. Nu este nevoie de contentEditable , jquery, HTML5

https://Jsfiddle.net/gsivanov/38tLqobw/2/

bharti parmar

Folosesc acest lucru pentru câmpul editabil

user333333866

Dacă utilizați Jquery, acest plugin vă ajutăeste simplu, dar este bun

https://github.com/samuelsantosdev/TableEdit

Comentarii

  • Arată ca un plugin interesant. Documentația pentru modul de utilizare a acestuia poate fi găsită în fișierul index.html. Vă rugăm să aruncați o privire la meta.stackexchange.com/questions/8231/… pentru a vedea de ce includerea mai multor informații decât un simplu link face ca răspunsul să fie mai bun. –  > Por Jason Aller.
mathmaniac88

Acesta este punctul esențial, deși nu este nevoie să faceți codul atât de dezordonat. În schimb, ați putea pur și simplu să iterați prin toate <td> și să adăugați <input> cu atributele și, în final, să puneți valorile.

Mahmoud Sayed

acest lucru este de fapt atât de simplu, acesta este exemplul meu HTML, jQuery… și funcționează ca un farmec, construiesc tot codul folosind un eșantion de date json online.sănătate

<< HTML >>

<table id="myTable"></table>

<< jQuery >>

<script>
        var url = 'http://jsonplaceholder.typicode.com/posts';
        var currentEditedIndex = -1;
        $(document).ready(function () {
            $.getJSON(url,
            function (json) {
                var tr;
                tr = $('<tr/>');
                tr.append("<td>ID</td>");
                tr.append("<td>userId</td>");
                tr.append("<td>title</td>");
                tr.append("<td>body</td>");
                tr.append("<td>edit</td>");
                $('#myTable').append(tr);

                for (var i = 0; i < json.length; i++) {
                    tr = $('<tr/>');
                    tr.append("<td>" + json[i].id + "</td>");
                    tr.append("<td>" + json[i].userId + "</td>");
                    tr.append("<td>" + json[i].title + "</td>");
                    tr.append("<td>" + json[i].body + "</td>");
                    tr.append("<td><input type='button' value='edit' id='edit' onclick='myfunc(" + i + ")' /></td>");
                    $('#myTable').append(tr);
                }
            });


        });


        function myfunc(rowindex) {

            rowindex++;
            console.log(currentEditedIndex)
            if (currentEditedIndex != -1) {  //not first time to click
                cancelClick(rowindex)
            }
            else {
                cancelClick(currentEditedIndex)
            }

            currentEditedIndex = rowindex; //update the global variable to current edit location

            //get cells values
            var cell1 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(0)").text());
            var cell2 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(1)").text());
            var cell3 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(2)").text());
            var cell4 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(3)").text());

            //remove text from previous click


            //add a cancel button
            $("#myTable tr:eq(" + (rowindex) + ") td:eq(4)").append(" <input type='button' onclick='cancelClick("+rowindex+")' id='cancelBtn' value='Cancel'  />");
            $("#myTable tr:eq(" + (rowindex) + ") td:eq(4)").css("width", "200");

            //make it a text box
            $("#myTable tr:eq(" + (rowindex) + ") td:eq(0)").html(" <input type='text' id='mycustomid' value='" + cell1 + "' style='width:30px' />");
            $("#myTable tr:eq(" + (rowindex) + ") td:eq(1)").html(" <input type='text' id='mycustomuserId' value='" + cell2 + "' style='width:30px' />");
            $("#myTable tr:eq(" + (rowindex) + ") td:eq(2)").html(" <input type='text' id='mycustomtitle' value='" + cell3 + "' style='width:130px' />");
            $("#myTable tr:eq(" + (rowindex) + ") td:eq(3)").html(" <input type='text' id='mycustomedit' value='" + cell4 + "' style='width:400px' />");

        }

        //on cancel, remove the controls and remove the cancel btn
        function cancelClick(indx)
        {

            //console.log('edit is at row>> rowindex:' + currentEditedIndex);
            indx = currentEditedIndex;

            var cell1 = ($("#myTable #mycustomid").val());
            var cell2 = ($("#myTable #mycustomuserId").val());
            var cell3 = ($("#myTable #mycustomtitle").val());
            var cell4 = ($("#myTable #mycustomedit").val()); 

            $("#myTable tr:eq(" + (indx) + ") td:eq(0)").html(cell1);
            $("#myTable tr:eq(" + (indx) + ") td:eq(1)").html(cell2);
            $("#myTable tr:eq(" + (indx) + ") td:eq(2)").html(cell3);
            $("#myTable tr:eq(" + (indx) + ") td:eq(3)").html(cell4);
            $("#myTable tr:eq(" + (indx) + ") td:eq(4)").find('#cancelBtn').remove();
        }



    </script>

YuZhang

Adăugați <input> la <td> atunci când se face clic pe el. schimbați <input> la <span> atunci când este estompat.