Comment rendre les cellules de table HTML modifiables?
j'aimerais rendre certaines cellules de la table html modifiables, double-cliquez simplement sur une cellule, entrez du texte et les modifications peuvent être envoyées au serveur. Je ne veux pas utiliser des outils comme Dojo data grid. Parce qu'il propose d'autres fonctionnalités. Me donneriez-vous des extraits de code ou des conseils sur la façon de le mettre en œuvre?
10 réponses
vous pouvez utiliser l'attribut contenteditable sur les cellules, les lignes ou la table en question.
mise à Jour de 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 juste que si vous rendez la table modifiable, dans Mozilla au moins, vous pouvez supprimer des lignes, etc.
vous devez également vérifier si les navigateurs de votre public cible supportent cet attribut.
en ce qui concerne l'écoute des changements (pour que vous puissiez envoyer au serveur), voir événements de changement 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>
j'ai trois approches,
Ici, vous pouvez utiliser à la fois <input> ou <textarea> selon vos exigences.
1. Utilisez L'entrée <td> .
utilisant <input> élément en tout <td> s,
<tr><td><input type="text"></td>....</tr>
Vous pouvez Aussi redimensionner l'entrée à la taille de ce td. ex.,
input { width:100%; height:100%; }
2. Utilisez l'attribut contenteditable='true' . (HTML5)
mais si vous voulez utiliser contenteditable='true' vous pourriez aussi vouloir sauvegarder les valeurs appropriées dans la base de données. vous pouvez y parvenir avec ajax.
vous pouvez attacher des poignées de touches keyup , keydown , keypress etc au <td> . En outre, il est bon d'utiliser certains delay() avec que les événements lorsque l'utilisateur tape en continu, l'événement ajax ne sera pas feu avec chaque pression d'utilisateur clé. 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é, remplacer sa valeur en fonction de la valeur de la td. Lorsque l'entrée est blured, changez la valeur de la td avec la valeur de l'entrée. Tout cela avec javascript.
Vous pouvez utiliser x-modifiable https://vitalets.github.io/x-editable/ sa bibliothèque impressionnante de bootstrap
si vous utilisez Jquery, ce plugin vous aidera est simple, mais est bon
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:
ceci est un exemple simple 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>
il suffit d'insérer <input> élément dans <td> dynamiquement, sur le clic de la cellule. Seulement HTML simple et Javascript. Pas besoin contentEditable , jquery , HTML5
c'est en fait aussi simple, c'est mon HTML, jQuery sample.. et ça fonctionne comme un charme, je construis tout le code en utilisant un échantillon de données JSON en ligne. 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>
C'est le point essentiel, même si vous n'avez pas besoin de rendre le code aussi confus. Au lieu de cela, vous pouvez simplement itérer à travers tous les <td> et ajouter le <input> avec les attributs et finalement mis dans 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>