Comment faire HTML cellule de tableau modifiable?

J'aimerais faire quelques cellules de tableau html modifiable, il suffit de double-cliquer sur une cellule, de saisir du texte et les modifications peuvent être envoyés au serveur. Je ne veux pas utiliser certains outils de de comme dojo de grille de données. Parce qu'il propose d'autres fonctionnalités. Voulez-vous me donner quelques extrait de code ou des conseils sur la façon de la mettre en œuvre?

InformationsquelleAutor wqfeng | 2011-05-16

102

Vous pouvez utiliser l'attribut contenteditable sur les cellules, les lignes, ou de la table en question.

Mis à jour pour la compatibilité 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>
```
Il suffit de noter que si vous faites de la table modifiable, dans Mozilla au moins, vous pouvez supprimer des lignes, etc.

Vous auriez également besoin de vérifier si votre public cible est les navigateurs pris en charge cet attribut.

Autant que l'écoute pour que les modifications (de sorte que vous pouvez envoyer vers le serveur), voir contenteditable les événements de changement de
- Je vous remercie. Il semble contenteditable est pris en charge dans HTML5. Je suis à la recherche d'une solution qui fonctionne dans le html4 trop.
- Bien que finalement, c'est codifiée dans le standard HTML5, c'était déjà bien pris en charge dans la plupart des navigateurs plus anciens (à l'exception de la seule prise en charge partielle dans FF3): caniuse.com/contenteditable (mais pas dans les appareils mobiles)
- Je l'ai testé avec IE8. Il ne fonctionne pas.
- Mis à jour pour fonctionner maintenant...
- Bon conseil. J'ai été à la recherche pour elle. Merci à vous.
- Merci pour le bon conseil.
- S'il vous plaît expliquez-moi pourquoi il doit y avoir une DIV dans la cellule pour le faire fonctionner pour IE. À l'aide de <td contenteditable=true> ne fait pas de la cellule modifiable dans IE. J'ai pensé contenteditable était pour aucun de l'élément HTML?
- C'est juste la façon dont il est avec IE: "Si la TABLE, le COL, COLGROUP, TR, TD, TFOOT, TH, THEAD, et TR éléments ne peut pas être défini comme le contenu éditable directement, un contenu modifiable SPAN ou DIV élément peut être placé à l'intérieur de l'individu cellules de tableau (TD et TH éléments)." msdn.microsoft.com/en-us/library/ie/ms533690%28v=vs.85%29.aspx .
- Il semble que vous êtes juste qu'il en soit, pour n'importe quel élément HTML. Pour le HTMLElement interface définie à html.spec.whatwg.org/multipage/... -> met en œuvre ElementContentEditable -> défini à html.spec.whatwg.org/multipage/... -> les références à "modification d'hôte" dans le dvcs.w3.org/hg/editing/raw-file/tip/editing.html#editing-host -- aucune de ces semblent permettre de restreindre les éléments de soutien contenteditable. Bienvenue dans le monde merveilleux de navigateur de bugs 🙂
- ma table en œuvre lui-même, selon les données (le plus de données, plus <td>). Comment pourrais-je régler tous les <td> étant modifiable par défaut?
- Si vous avez besoin de compatibilité IE8, vous avez juste à ajouter le contenteditable div chaque fois que vous créez un nouveau <td>. Sinon, comme indiqué dans le post, vous pouvez ajouter le contenteditable sur les cellules, les lignes, ou de la table.
InformationsquelleAutor Brett Zamir
43

HTML5 prend en charge 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>
```
3ème partie modifier

Pour citer le mdn entrée sur contenteditable
De l'attribut doit prendre une des valeurs suivantes:
- vrai ou la chaîne vide, ce qui indique que l'élément doit être modifiable;
- false, ce qui indique que l'élément ne doit pas être modifiable.
Si cet attribut n'est pas défini, sa valeur par défaut est hérité de son
élément parent.

Cet attribut est un énumérés et non pas un Booléen, un. Cela signifie
que l'explicite l'utilisation de l'une des valeurs true, false ou le vide
la chaîne est obligatoire et que des raccourcis ... n'est pas autorisé.
```
//wrong not allowed
<label contenteditable>Example Label</label> 

//correct usage
<label contenteditable="true">Example Label</label>.
```
- Bizarre. Habituellement, la valeur de l'attribut n'est pas true, c'est quoi le nom est. Par exemple, <td contenteditable='contenteditable'></td>.
- Les états possibles de contenteditable: contenteditable**="" ou **contenteditable**="true" Indique que l'élément est modifiable. **contenteditable**="false" Indique que l'élément n'est pas modifiable. **contenteditable**="hériter" Indique que l'élément est modifiable si son parent immédiat de l'élément est modifiable. C'est la valeur par défaut. Lorsque vous ajoutez **contenteditable pour un élément, le navigateur va faire que l'élément modifiable. En outre, tous les enfants de cet élément sera également modifiable à moins que les éléments enfants sont explicitement **contenteditable**="false".
- Je sais que, j'ai juste pensé que c'était bizarre, parce que la plupart des autres attributs n'ont pas que de la syntaxe.
InformationsquelleAutor vardhan
16

J'ai trois approches,
Ici, vous pouvez utiliser à la fois <input> ou <textarea> selon vos exigences.

1. Utilisez l'Entrée dans <td>.

À l'aide de <input> élément dans tous les <td>s,
```
<tr><td><input type="text"></td>....</tr>
```
Aussi, vous pouvez redimensionner l'entrée à la taille de son td. ex.,
```
input { width:100%; height:100%; }
```
Vous pouvez également changer la couleur de la bordure de la zone d'entrée, quand il n'est pas en cours d'édition.

2. Utilisation contenteditable='true' attribut. (HTML5)

Cependant, si vous souhaitez utiliser contenteditable='true', vous pouvez également enregistrer les valeurs appropriées de la base de données. Vous pouvez réaliser cela avec ajax.

Vous pouvez joindre keyhandlers keyup, keydown, keypress etc, à la <td>. Aussi, il est bon d'utiliser certains delay() avec ces événements lorsque l'utilisateur en permanence types, l'ajax d'événement ne se déclenche pas à chaque utilisateur de presse. par exemple,
```
$('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. Ajouter <input> à <td> lorsqu'il est cliqué.

Ajouter l'élément d'entrée dans td lorsque le <td> est cliqué, remplacez sa valeur en fonction de la td's de la valeur. Lorsque l'entrée est floue, changer le td de la valeur à l'entrée de la valeur. Tout cela avec javascript.
- Malheureusement vous avez manqué la question de partie "Comment faire HTML cellule de tableau modifiable?", en particulier dans l'exemple 2. L'utilisateur a demandé comment l'obtenir sur doubleclick. Pouvez vous de bien vouloir mettre en œuvre la partie manquante?
- j'ai quelques problème avec contenteditable=true pouvez-vous m'aider dans cette s'il vous plaît?
- Sûr que je peux essayer. Avez-vous un js fiddle pour qui?
InformationsquelleAutor Bhavesh Gangani

Essayer 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 aussi visiter ce lien pour plus de détails :

jQuery et Modifiable tableau HTML

Pour éviter les problèmes avec IE $(this).les enfants().(premier).focus(); - stackoverflow.com/a/3562193/5234417

InformationsquelleAutor user3751006

4

Vous pouvez utiliser x-modifiable https://vitalets.github.io/x-editable/
son impressionnante bibliothèque de bootstrap

InformationsquelleAutor Ahmad Halah
3

Si vous utilisez Jquery, ce plugin vous aider
est simple, mais il est bon

https://github.com/samuelsantosdev/TableEdit
- Qui ressemble à un plugin intéressant. La documentation pour savoir comment utiliser il peut être trouvé dans la index.html fichier. Veuillez prendre un coup d'oeil à meta.stackexchange.com/questions/8231/... pour voir pourquoi, y compris des informations plus que juste un lien permet une meilleure réponse.
InformationsquelleAutor user3333866

C'est une seule et praticable exemple.

 <html>
<head>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <!-- jQuery source -->
</head>
<body>
<table align="center">
<tr> <td>id</td> <td>name</td> </tr>
<tr> <td>001</td> <td>dog</td> </tr>
<tr> <td>002</td> <td>cat</td> </tr>
<tr> <td>003</td> <td>pig</td> </tr>
</table>
<script>
$(function(){
$("td").click(function(event){
if($(this).children("input").length > 0)
return false;
var tdObj = $(this);
var preText = tdObj.html();
var inputObj = $("<input type='text' />");
tdObj.html("");
inputObj.width(tdObj.width())
.height(tdObj.height())
.css({border:"0px",fontSize:"17px"})
.val(preText)
.appendTo(tdObj)
.trigger("focus")
.trigger("select");
inputObj.keyup(function(event){
if(13 == event.which) { //press ENTER-key
var text = $(this).val();
tdObj.html(text);
}
else if(27 == event.which) {  //press ESC-key
tdObj.html(preText);
}
});
inputObj.click(function(){
return false;
});
});
});
</script>
</body>
</html>

InformationsquelleAutor ACE Arthur

2

Il suffit d'insérer <input> élément <td> de manière dynamique, sur la cellule, cliquez sur. Seulement simple en HTML et Javascript. Pas besoin de contentEditable , jquery, HTML5

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

InformationsquelleAutor gsivanov

c'est en fait aussi simple,
c'est mon HTML, jQuery exemple.. et il fonctionne comme un charme, j'ai construit tout le code à l'aide en ligne de données json de l'échantillon.
cheers

<< 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>

InformationsquelleAutor Mahmoud Sayed

C'est le point essentiel bien que vous n'avez pas besoin de rendre le code de ce désordre. Au lieu de cela, vous pourriez juste itérer sur tous les <td> et ajouter le <input> avec les attributs et enfin mettre en valeurs.

JS:

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

HTML:

<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>

InformationsquelleAutor awesomeguy

Vous devez vous connecter pour publier un commentaire.

3ème partie modifier