PHPでボタンをクリックしてテーブルに行を追加する方法-PHPの問題-php.cn

PHPでボタンをクリックしてテーブルに行を追加する方法

PHPz

リリース： 2023-03-31 09:45:08

オリジナル

1081 人が閲覧しました

PHP を使用して Web テーブルを作成する場合、多くの場合、行を追加する機能を使用する必要があります。この記事では、PHPを使用して、ボタンがクリックされたときにテーブルに行を追加する方法を紹介します。

まず、テーブルを用意し、初期行数を設定します。具体的なコードは次のとおりです。

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

ログイン後にコピー

テーブルの最後にボタンが追加されます<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") を使用してループ内に作成します。3 つの新しい <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;">';

ログイン後にコピー

この方法で実現できます。ボタンをクリックすると、テーブルの行の効果が動的に追加されます。

概要

PHP でテーブル行を動的に追加する方法は複雑ではなく、JavaScript を使用して実現できます。この記事の導入により、読者はボタンをクリックした後にテーブルの行を追加する方法を習得したと思います。

以上がPHPでボタンをクリックしてテーブルに行を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。