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.
Vous pouvez utiliser l'attribut contenteditable sur les cellules, les lignes ou le tableau en question.
Mise à jour pour la compatibilité avec 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 le tableau modifiable, dans Mozilla au moins, vous pouvez supprimer des lignes, etc.
Vous devrez également vérifier si les navigateurs de votre public cible prennent en charge cet attribut.
En ce qui concerne l'écoute des modifications (pour pouvoir les envoyer au serveur), voir événements de changement de contenu
Merci. Il semble que contenteditable soit supporté en HTML5. Je cherche une solution qui fonctionne aussi en html4.
Bien qu'il soit finalement codifié dans la norme avec HTML5, il était déjà bien supporté dans la plupart des anciens navigateurs (à l'exception d'un support partiel dans FF3) : caniuse.com/contenteditable (mais pas dans les appareils mobiles)
Bizarre. D'habitude, la valeur de l'attribut n'est pas true c'est peu importe le nom. Par exemple, <td contenteditable='contenteditable'></td> .
États possibles de contentable : contenteditable**="" ou **contenteditable**="true" Indique que l'élément est modifiable. **contenteditable**="false" Indique que l'élément n'est pas modifiable. **contenteditable**="inherit" Indique que l'élément est modifiable si son élément parent immédiat est modifiable. Il s'agit de la valeur par défaut. Lorsque vous ajoutez **contenteditable à un élément, le navigateur rendra cet élément modifiable. En outre, tous les enfants de cet élément deviendront également modifiables, à moins que les éléments enfants ne soient explicitement **contentable**="false".
J'ai trois approches, Ici, vous pouvez utiliser les deux <input> ou <textarea> selon vos besoins.
1. Utiliser l'entrée dans <td> .
Utilisation de <input> dans tous les <td> s,
<tr><td><input type="text"></td>....</tr>De même, vous pouvez redimensionner l'entrée à la taille de son td . ex..,
input { width:100%; height:100%; }Vous pouvez également modifier la couleur de la bordure du champ de saisie lorsqu'il n'est pas en cours d'édition.
2. Utilisez contenteditable='true' attribut. (HTML5)
Cependant, si vous voulez utiliser contenteditable='true' vous pourriez également vouloir enregistrer les valeurs appropriées dans la base de données. Vous pouvez réaliser cela avec ajax.
Vous pouvez attacher des gestionnaires de clés keyup , keydown , keypress etc. à la <td> . De plus, il est bon d'utiliser delay() avec ces événements, lorsque l'utilisateur tape continuellement, l'événement ajax ne se déclenchera pas à chaque pression de touche de l'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. Ajouter <input> à <td> lorsqu'il est cliqué.
Ajouter l'élément de saisie dans td lorsque le <td> est cliqué, remplace sa valeur en fonction de l'option td La valeur de l'entreprise. Lorsque l'entrée est floue, changez la valeur du `td avec celle de l'entrée. Tout cela avec javascript.
Malheureusement, vous avez manqué la partie de la question "Comment rendre une cellule de tableau HTML modifiable ?", notamment dans l'exemple 2. L'utilisateur a demandé comment réaliser cela en double-cliquant. Pouvez-vous, s'il vous plaît, implémenter la partie manquante ?
Il s'agit d'un exemple exécutable.
$(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;
});
});
});
<html>
<head>
<!-- jQuery source -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</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>
</body>
</html>
J'utilise ceci pour un champ éditable
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead>
<tr>
<th class="text-center">Citation</th>
<th class="text-center">Security</th>
<th class="text-center">Implementation</th>
<th class="text-center">Description</th>
<th class="text-center">Solution</th>
<th class="text-center">Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pt-3-half" contenteditable="false">Aurelia Vega</td>
<td class="pt-3-half" contenteditable="false">30</td>
<td class="pt-3-half" contenteditable="false">Deepends</td>
<td class="pt-3-half" contenteditable="true"><input type="text" name="add1" value="spain" class="border-none"></td>
<td class="pt-3-half" contenteditable="true"><input type="text" name="add1" value="marid" class="border-none"></td>
<td>
<span class="table-remove"><button type="button"
class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span>
</td>
</tr>
</tbody>
</table> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
