So fügen Sie der Tabelle eine Zeile hinzu, indem Sie in PHP auf eine Schaltfläche klicken-PHP-Problem-php.cn

So fügen Sie der Tabelle eine Zeile hinzu, indem Sie in PHP auf eine Schaltfläche klicken

PHPz

Freigeben： 2023-03-31 09:45:08

Original

989 Leute haben es durchsucht

Wenn Sie PHP zum Erstellen von Webtabellen verwenden, müssen Sie häufig die Funktion zum Hinzufügen von Zeilen verwenden. In diesem Artikel wird erläutert, wie Sie mit PHP eine Zeile zur Tabelle hinzufügen, wenn auf eine Schaltfläche geklickt wird.

Zuerst bereiten wir eine Tabelle vor und legen die anfängliche Anzahl an Zeilen fest. Der spezifische Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Fügen Sie eine Schaltfläche <button onclick="addRow()">Fügen Sie eine Zeile</button> am Ende der Tabelle hinzu, was üblich ist löst das Ereignis des Hinzufügens einer Zeile aus. Wenn auf die Schaltfläche geklickt wird, wird die Funktion addRow() in JavaScript aufgerufen. <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);
}

Nach dem Login kopieren

该方法中，首先通过 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;">';

Nach dem Login kopieren

Bei dieser Methode ermitteln Sie zunächst die aktuelle Anzahl der Zeilen in der Tabelle über document.getElementById("myTable").rows.length. Verwenden Sie dann document.createElement("tr"), um ein neues <tr>-Element mit document.createElement("td") zu erstellen Schleife, um drei neue <td>-Elemente zu erstellen und neuen Inhalt einzufügen. Fügen Sie abschließend das neue Zeilenelement in den <tbody> der Tabelle ein, indem Sie

document.getElementById("myTable").getElementsByTagName('tbody')[0].appendChild(row) verwenden. Code> Code> untergeordnetes Element. 
Es ist zu beachten, dass beim Erstellen eines neuen Eingabefelds der Name auf einen anderen Wert eingestellt werden muss. Die Zeilennummer wird hier als Suffix verwendet. Der spezifische Code lautet wie folgt: rrreee
Auf diese Weise wird der Tabellenzeilen können dynamisch hinzugefügt werden, wenn auf die Schaltfläche geklickt wird. Der Effekt ist verschwunden. 
Zusammenfassung
Die Methode zum dynamischen Hinzufügen von Tabellenzeilen in PHP ist nicht kompliziert und kann mit Hilfe von JavaScript erreicht werden. Ich glaube, dass die Leser durch die Einleitung dieses Artikels die Methode zum Hinzufügen von Tabellenzeilen nach dem Klicken auf eine Schaltfläche beherrschen. 🎜

Das obige ist der detaillierte Inhalt vonSo fügen Sie der Tabelle eine Zeile hinzu, indem Sie in PHP auf eine Schaltfläche klicken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!