PHP에서 버튼을 클릭하여 테이블에 행을 추가하는 방법-PHP 문제-php.cn

PHP에서 버튼을 클릭하여 테이블에 행을 추가하는 방법

PHPz

풀어 주다： 2023-03-31 09:45:08

원래의

1076명이 탐색했습니다.

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&#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() 함수가 호출됩니다. <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;">';

로그인 후 복사

이 방법에서는 먼저 document.getElementById("myTable").rows.length를 통해 테이블의 현재 행 수를 가져옵니다. 그런 다음 document.createElement("tr")를 사용하여 document.createElement("td")를 사용하여 새 <tr> 요소를 만듭니다. 반복하여 세 개의 새로운 <td> 요소를 생성하고 새 콘텐츠를 삽입합니다. 마지막으로

document.getElementById("myTable").getElementsByTagName('tbody')[0].appendChild(row)를 사용하여 테이블의 <tbody>에 새 행 요소를 삽입합니다. 코드> 코드> 하위 요소. 
새 입력 상자를 만들 때 이름을 다른 값으로 설정해야 합니다. 여기서는 행 번호가 접미사로 사용됩니다. rrreee
이렇게 하면 버튼을 클릭하면 테이블 행이 동적으로 추가될 수 있습니다. 
요약
PHP에서 테이블 행을 동적으로 추가하는 방법은 복잡하지 않으며 JavaScript의 도움으로 달성할 수 있습니다. 이 글의 소개를 통해 독자들은 버튼을 클릭한 후 테이블 행을 추가하는 방법을 마스터했다고 믿습니다. 🎜

위 내용은 PHP에서 버튼을 클릭하여 테이블에 행을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!