Explication détaillée des étapes pour insérer de nouvelles lignes dans le tableau avec jQuery

Explication détaillée des étapes pour insérer de nouvelles lignes dans le tableau avec jQuery

Dans le développement Web, jQuery peut être utilisé pour utiliser facilement des éléments DOM et obtenir des effets interactifs sur la page. L'insertion de nouvelles lignes dans les tableaux est une exigence courante. Cet article présentera en détail comment utiliser jQuery pour réaliser cette fonction et fournira des exemples de code spécifiques.

1. Présentez la bibliothèque jQuery

Avant d'utiliser jQuery, vous devez d'abord introduire la bibliothèque jQuery dans la page Web. Il peut être importé via CDN, ou vous pouvez télécharger la bibliothèque jQuery localement, puis l'importer.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. Écrivez une structure de tableau HTML

Écrivez une structure de tableau simple sur la page pour démontrer l'effet de l'insertion de nouvelles lignes dans le tableau.

<table id="myTable">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
        </tr>
    </tbody>
</table>
<button id="addRow">添加新行</button>

3. Utilisez jQuery pour insérer de nouvelles lignes

Ensuite, nous utilisons jQuery pour implémenter la fonction d'insertion de nouvelles lignes dans le tableau après avoir cliqué sur le bouton.

$(document).ready(function() {
    $('#addRow').click(function() {
        $('#myTable tbody').append(`
            <tr>
                <td>王五</td>
                <td>28</td>
            </tr>
        `);
    });
});

Dans le code ci-dessus, nous utilisons d'abord $(document).ready()来确保页面加载完成后再执行代码。接着，通过$('#addRow').click()来监听按钮点击事件，当按钮被点击时执行相应的操作。在点击事件的处理函数中，使用$('#myTable tbody').append() pour ajouter une nouvelle ligne dans le corps du tableau.

4. Intégrez le code

Sur la base des étapes ci-dessus, intégrez le code qui introduit la bibliothèque jQuery, le code HTML de la structure du tableau et le code JavaScript qui insère de nouvelles lignes.

    
    
    
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>



    

        

            

                
姓名
                
年龄
            
        
        

            

                
张三
                
25
            
            

                
李四
                
30
            
        
    
    添加新行
    
    <script>
        $(document).ready(function() {
            $('#addRow').click(function() {
                $('#myTable tbody').append(`
                    <tr>
                        <td>王五</td>
                        <td>28</td>
                    </tr>
                `);
            });
        });
    </script>

Conclusion

À travers les étapes ci-dessus, nous avons présenté en détail comment utiliser jQuery pour implémenter la fonction d'insertion de nouvelles lignes dans le tableau et avons fourni des exemples de code spécifiques. De cette manière, l'effet de l'ajout dynamique de données au tableau peut être réalisé facilement et rapidement, améliorant ainsi l'expérience utilisateur.

J'espère que cet article vous sera utile, merci d'avoir lu !

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!