Maison >développement back-end >Problème PHP >Comment ajouter une ligne au tableau en cliquant sur un bouton en php

Comment ajouter une ligne au tableau en cliquant sur un bouton en php

PHPzoriginal: 2023-03-31 09:07:561081parcourir

Lorsque vous utilisez PHP pour créer des tableaux Web, vous devez souvent utiliser la fonction d'ajout de lignes. Cet article explique comment utiliser PHP pour ajouter une ligne au tableau lorsqu'un bouton est cliqué.

Tout d'abord, nous préparons un tableau et définissons le nombre initial de lignes. Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
<head>
    <title>PHP 点击按钮表格增加一行</title>
    <meta charset="UTF-8">
</head>
<body>
    <table id="myTable" border="1">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <?php
                // 初始表格行数为 3
                $row = 3;
                for ($i = 1; $i <= $row; $i++) {
                    echo '<tr>';
                    echo '<td>'.$i.'</td>';
                    echo '<td><input type="text" name="name&#39;.$i.&#39;"></td>';
                    echo '<td><input type="text" name="age&#39;.$i.&#39;"></td>';
                    echo '</tr>';
                }
            ?>
        </tbody>
    </table>
    <br>
    <button onclick="addRow()">增加一行</button>

    <script>
        function addRow() {
            // 获取当前表格行数
            var rowCount = document.getElementById("myTable").rows.length;
            // 创建一行新的 table row 元素
            var row = document.createElement("tr");
            // 遍历表格头
            for (var i = 0; i < 3; i++) {
                // 创建新的 table cell 元素
                var cell = document.createElement("td");
                // 每列的内容
                var column = "";
                if (i == 0) {
                    // 序号列
                    column = rowCount;
                } else {
                    // 输入框列
                    column = &#39;<input type="text" name="&#39; + (i == 1 ? &#39;name&#39; : &#39;age&#39;) + rowCount + &#39;">';
                }
                // 插入新的内容到 cell 元素
                cell.innerHTML = column;
                // 插入 cell 元素到 row 元素
                row.appendChild(cell);
            }
            // 插入新的 row 元素到 table 元素的 tbody 子元素
            document.getElementById("myTable").getElementsByTagName('tbody')[0].appendChild(row);
        }
    </script>
</body>
</html>

Ajouter un bouton <button onclick="addRow()">Ajouter une ligne</button> à la fin du tableau, qui sert à déclencher l'événement d'ajout d'une ligne. Lorsque vous cliquez sur le bouton, la fonction addRow() en JavaScript sera appelée. <button onclick="addRow()">增加一行</button>，用于触发添加行的事件。点击按钮后，将会调用 JavaScript 中的 addRow() 函数。

function addRow() {
    // 获取当前表格行数
    var rowCount = document.getElementById("myTable").rows.length;
    // 创建一行新的 table row 元素
    var row = document.createElement("tr");
    // 遍历表格头
    for (var i = 0; i < 3; i++) {
        // 创建新的 table cell 元素
        var cell = document.createElement("td");
        // 每列的内容
        var column = "";
        if (i == 0) {
            // 序号列
            column = rowCount;
        } else {
            // 输入框列
            column = &#39;<input type="text" name="&#39; + (i == 1 ? &#39;name&#39; : &#39;age&#39;) + rowCount + &#39;">';
        }
        // 插入新的内容到 cell 元素
        cell.innerHTML = column;
        // 插入 cell 元素到 row 元素
        row.appendChild(cell);
    }
    // 插入新的 row 元素到 table 元素的 tbody 子元素
    document.getElementById("myTable").getElementsByTagName('tbody')[0].appendChild(row);
}

该方法中，首先通过 document.getElementById("myTable").rows.length 获取表格当前的行数。然后，使用 document.createElement("tr") 创建一个新的 <tr> 元素，使用 document.createElement("td") 循环创建三个新的 <td> 元素，并插入新的内容。最后，使用 document.getElementById("myTable").getElementsByTagName('tbody')[0].appendChild(row) 将新的行元素插入表格的 <tbody>

column = '<input type="text" name="&#39; + (i == 1 ? &#39;name&#39; : &#39;age&#39;) + rowCount + &#39;">';

Dans cette méthode, obtenez d'abord le nombre actuel de lignes dans le tableau via document.getElementById("myTable").rows.length. Ensuite, utilisez document.createElement("tr") pour créer un nouvel élément <tr> à l'aide de document.createElement("td") Boucle pour créer trois nouveaux éléments <td> et insérer un nouveau contenu. Enfin, insérez le nouvel élément de ligne dans le <tbody> du tableau en utilisant

document.getElementById("myTable").getElementsByTagName('tbody')[0].appendChild(row) code> code> élément enfant. 
Il convient de noter que lors de la création d'une nouvelle zone de saisie, le nom doit être défini sur une valeur différente. Le numéro de ligne est utilisé ici comme suffixe. Le code spécifique est le suivant : rrreee
De cette façon, le. La ligne du tableau peut être ajoutée dynamiquement lorsque vous cliquez sur le bouton. L'effet a disparu. 
Résumé
La méthode d'ajout dynamique de lignes de tableau en PHP n'est pas compliquée et peut être réalisée à l'aide de JavaScript. Grâce à l'introduction de cet article, je pense que les lecteurs maîtrisent la méthode d'ajout de lignes de tableau après avoir cliqué sur un bouton. 🎜

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!

php JavaScript 循环 Length 事件 tbody td tr

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment appeler une méthode en phpArticle suivant：Comment appeler une méthode en php

Articles Liés

Voir plus