Comment rendre une cellule de tableau HTML modifiable ?

Question

J'aimerais rendre certaines cellules d'un tableau html modifiables. Il suffit de double-cliquer sur une cellule, de saisir du texte et les modifications sont envoyées au serveur. Je ne veux pas utiliser certaines boîtes à outils comme la grille de données Dojo. Parce qu'il fournit d'autres fonctionnalités. Pourriez-vous me fournir un extrait de code ou des conseils sur la façon de l'implémenter ?

Merci.

Answer 1

Vous pouvez utiliser x-editable https://vitalets.github.io/x-editable/ sa bibliothèque géniale de bootstrap

Answer 2

Il suffit d'insérer <input> élément dans <td> dynamiquement, au clic de la cellule. Seulement du simple HTML et Javascript. Pas besoin de contentEditable , jquery , HTML5

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

Answer 3

C'est le point essentiel, même si vous n'avez pas besoin de rendre le code aussi désordonné. Au lieu de cela, vous pourriez simplement itérer à travers tous les fichiers <td> et ajoutez le <input> avec les attributs et enfin mettre les valeurs.

function edit(el) {
  el.childNodes[0].removeAttribute("disabled");
  el.childNodes[0].focus();
  window.getSelection().removeAllRanges();
}
function disable(el) {
  el.setAttribute("disabled","");
}

<table border>
<tr>
<td ondblclick="edit(this)"><input value="cell1" disabled onblur="disable(this)"></td>
<td ondblclick="edit(this)"><input value="cell2" disabled onblur="disable(this)"></td>
<td ondblclick="edit(this)"><input value="cell3" disabled onblur="disable(this)"></td>
<td ondblclick="edit(this)"><input value="so forth..." disabled onblur="disable(this)">
</td>
</tr>
</table>

Answer 4

Essayez ce code.

$(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");
 });
 });
});

Vous pouvez également visiter ce lien pour plus de détails :

• jQuery et tableau HTML modifiable

Answer 5

Si vous utilisez Jquery, ce plugin vous aidera est simple, mais est bon

https://github.com/samuelsantosdev/TableEdit