php怎么实现点击按钮表格增加一行-PHP问题-PHP中文网

php怎么实现点击按钮表格增加一行

PHPz

发布： 2023-03-31 09:07:56

原创

1235人浏览过

在使用 php 制作网页表格时，经常需要用到增加行的功能。本文将介绍如何在点击按钮时使用 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'.$i.'"></td>';
                    echo '<td><input type="text" name="age'.$i.'"></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 = '<input type="text" name="' + (i == 1 ? 'name' : 'age') + rowCount + '">';
                }
                // 插入新的内容到 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 = '<input type="text" name="' + (i == 1 ? 'name' : 'age') + rowCount + '">';
        }
        // 插入新的内容到 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> 元素，使用 <code>document.createElement("td") 循环创建三个新的 <td> 元素，并插入新的内容。最后，使用 <code>document.getElementById("myTable").getElementsByTagName('tbody')[0].appendChild(row) 将新的行元素插入表格的 <tbody> 子元素中。<p>需要注意的是，在创建新的输入框时，名称需要设置为不同的值，这里使用行数作为后缀，具体代码如下：</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/7fc7563c4182" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">PHP免费学习笔记（深入）</a>”；</p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/1365"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679975740787.png" alt="腾讯云AI代码助手"> </a> <div class="aritcle_card_info"> <a href="/ai/1365">腾讯云AI代码助手</a> <p>基于混元代码大模型的AI辅助编码工具</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="腾讯云AI代码助手"> <span>205</span> </div> </div> <a href="/ai/1365" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="腾讯云AI代码助手"> </a> </div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">column = '<input type="text" name="' + (i == 1 ? 'name' : 'age') + rowCount + '">';</pre>

登录后复制

</div><p>这样就可以实现在点击按钮时，动态增加表格行的效果了。</p>
<p>总结</p>
<p>在 PHP 中动态增加表格行的方法并不复杂，只需借助 JavaScript 实现即可。通过本文的介绍，相信读者已经掌握了在点击按钮后增加表格行的方法。</p>
</tbody>

以上就是php怎么实现点击按钮表格增加一行的详细内容，更多请关注php中文网其它相关文章！