Comment rendre les cellules de tableau HTML modifiables?
J'aimerais rendre certaines cellules de la table html modifiables, il suffit de double-cliquer sur une cellule, d'entrer du texte et les modifications peuvent être 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 manière de le mettre en œuvre?
Vous pouvez utiliser l'attribut contenteditable sur les cellules, les lignes ou le tableau en question.
Mise à 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>
Notez simplement que si vous rendez la table modifiable, au moins dans Mozilla, vous pouvez supprimer des lignes, etc.
Vous devez également vérifier si les navigateurs de votre public cible prennent en charge cet attribut.
En ce qui concerne l’écoute des modifications (afin que vous puissiez envoyer au serveur), voir événements de modification contenteditable
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>
Édition tierce
Pour citer l'entrée mdn sur contenteditable
L'attribut doit prendre l'une des valeurs suivantes:
true ou la chaîne vide, qui indique que l'élément doit être éditable;
false, ce qui indique que l'élément ne doit pas être éditable.
Si cet attribut n'est pas défini, sa valeur par défaut est héritée de son élément parent.
Cet attribut est énuméré et non booléen. Ça signifie que l'utilisation explicite de l'une des valeurs true, false ou le vide chaîne est obligatoire et qu'un raccourci ... n'est pas autorisé.
// wrong not allowed
<label contenteditable>Example Label</label>
// correct usage
<label contenteditable="true">Example Label</label>.
J'ai trois approches, Ici, vous pouvez utiliser à la fois <input> et <textarea> selon vos besoins.
1. Utilisez Entrée dans <td>.
Utiliser l'élément <input> dans tous les <td>s,
<tr><td><input type="text"></td>....</tr>
Vous pouvez également redimensionner l’entrée à la taille de sa td. ex.,
input { width:100%; height:100%; }
Vous pouvez également modifier la couleur de la bordure de la zone de saisie lorsqu'elle n'est pas en cours d'édition.
2. Utilisez l'attribut contenteditable='true'. (HTML5)
Toutefois, si vous souhaitez utiliser contenteditable='true', vous pouvez également enregistrer les valeurs appropriées dans la base de données. Vous pouvez y parvenir avec Ajax.
Vous pouvez associer des manipulateurs de clé keyup, keydown, keypress etc. au <td>. En outre, il est bon d’utiliser certains delay () avec ces événements lorsque l’utilisateur tape en permanence, l’événement ajax ne se déclenchera pas à chaque pression sur un utilisateur. 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. Ajoutez <input> à <td> lorsque vous cliquez dessus.
Ajoutez l'élément input dans td lorsque vous cliquez sur <td>, remplacez sa valeur en fonction de la valeur de td. Lorsque l'entrée est floue, changez la valeur de `td avec la valeur de l'entrée. Tout cela avec javascript.
Essayez ce code.
$(function () {
$("td").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html("<input type="text" value="" + OriginalContent + "" />");
$(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:
Vous pouvez utiliser x-editable https://vitalets.github.io/x-editable/ , Sa bibliothèque géniale depuis le bootstrap
Ceci est un exemple unique et exécutable.
<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>
Si vous utilisez Jquery, ce plugin vous aideraEst simple, mais bon
Il suffit d'insérer l'élément <input> dans <td> de manière dynamique, en cliquant sur la cellule. Seulement HTML et Javascript simples. Pas besoin de contentEditable, jquery, HTML5
c’est mon code HTML, mon exemple jQuery ... et cela fonctionne comme un charme, je construis tout le code en utilisant un échantillon de données JSON en ligne
<< 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>
C'est l'essentiel, même si vous n'avez pas besoin de rendre le code aussi désordonné. Au lieu de cela, vous pouvez simplement parcourir tout le <td> et ajouter le <input> avec les attributs et enfin insérer 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>