Comment modifier le contenu d'une table avec jquery

Dans le développement front-end, les tableaux sont un moyen courant d'afficher des données. Cependant, lorsque nous devons modifier le contenu du tableau, nous devons souvent le modifier manuellement un par un, ce qui est très gênant et inefficace. Par conséquent, utiliser jQuery pour modifier le contenu de la table est une très bonne solution.

Qu'est-ce que jQuery ?

Avant de parler de la modification du contenu des tables par jQuery, comprenons d'abord jQuery. jQuery est une excellente bibliothèque JavaScript qui encapsule de nombreuses méthodes pour simplifier la manipulation de documents, gérer des événements, créer des animations, gérer AJAX et d'autres fonctions puissantes. L'utilisation de jQuery nous permet d'exploiter les documents plus facilement et d'améliorer l'efficacité du développement.

Opération pour modifier le contenu d'une table

Voyons maintenant comment utiliser jQuery pour modifier le contenu d'une table.

Tout d'abord, nous devons créer un tableau dans la page HTML et y ajouter du contenu, tel que :

<table id="myTable">
   <tr>
     <th>姓名</th>
     <th>年龄</th>
     <th>性别</th>
   </tr>
   <tr>
     <td>小明</td>
     <td>20</td>
     <td>男</td>
   </tr>
   <tr>
     <td>小红</td>
     <td>18</td>
     <td>女</td>
   </tr>
</table>

Ensuite, nous devons écrire du code jQuery pour modifier le contenu du tableau. Le code suivant est un exemple que nous pouvons utiliser :

$(document).ready(function() {
    //获取表格中的单元格
    var $table = $('#myTable');
    var $tdList = $table.find('td');
    
    $tdList.each(function(){
        //获取单元格中的值
        var oldValue = $(this).text();
        //创建input
        var $input = $('<input type="text" class="form-control">');
        $input.val(oldValue);
        //替换
        $(this).html($input);
    });
    
    //监听input的keyup事件，即键盘按键事件
    $('input').live('keyup', function(event){
        //判断按键是否为enter键
        if(event.keyCode == 13) {
            //获取输入框的值
            var newValue = $(this).val();
            //替换单元格中的值
            $(this).parent().text(newValue);
        }
    });
});

Analyse du code :

1. $table = $('#myTable'); : Récupère l'élément table. $table = $('#myTable');：获取表格元素。
2. $tdList = $table.find('td');：获取表格中所有单元格元素。
3. $tdList.each()：遍历所有单元格，为每个单元格创建一个输入框。
4. $(this).html($input);：将输入框插入单元格中，替换单元格中原有的内容。
5. $('input').live('keyup', function(event){})：监听所有输入框的键盘按键事件。
6. if(event.keyCode == 13)：判断是否按下了回车键。
7. $(this).parent().text(newValue)
$tdList = $table.find('td'); : récupère tous les éléments de cellule du tableau.

$tdList.each() : parcourez toutes les cellules et créez une zone de saisie pour chaque cellule.

$(this).html($input); : Insérez la zone de saisie dans la cellule et remplacez le contenu d'origine dans la cellule.

$('input').live('keyup', function(event){}) : surveillez les événements des touches du clavier de toutes les zones de saisie.

🎜if(event.keyCode == 13) : Déterminez si la touche Entrée est enfoncée. 🎜🎜$(this).parent().text(newValue) : remplacez le contenu de la zone de saisie par le contenu d'origine de la cellule. 🎜🎜🎜Résumé🎜🎜L'exemple de code ci-dessus crée dynamiquement une zone de saisie pour chaque cellule en parcourant toutes les cellules, saisit de nouvelles données dans la zone de saisie et après avoir appuyé sur la touche Entrée, les nouvelles données remplacent les données d'origine. Cette méthode convient pour modifier les données du tableau une par une. 🎜🎜En tant que puissante bibliothèque JavaScript, jQuery présente également de grands avantages dans la modification du contenu des tableaux. Nous pouvons utiliser jQuery pour réaliser une modification du contenu des tables plus efficace et plus pratique grâce à ses fonctions riches. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!