php怎麼實現點擊按鈕表格增加一行
- PHPz原創
- 2023-03-31 09:07:561087瀏覽
使用 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> 元素，使用document.createElement("td") 循環創建三個新的<td> 元素，並插入新的內容。最後，使用document.getElementById("myTable").getElementsByTagName('tbody')[0].appendChild(row) 將新的行元素插入表格的<tbody>子元素中。
要注意的是，在建立新的輸入框時，名稱需要設定為不同的值，這裡使用行數作為後綴，具體程式碼如下：
column = '<input type="text" name="' + (i == 1 ? 'name' : 'age') + rowCount + '">';
這樣就可以實作在點選按鈕時，動態增加表格行的效果了。
總結
在 PHP 中動態增加表格行的方法並不複雜，只要藉助 JavaScript 實作即可。透過本文的介紹，相信讀者已經掌握了在點擊按鈕後增加表格行的方法。
以上是php怎麼實現點擊按鈕表格增加一行的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：php方法怎麼呼叫方法下一篇：php方法怎麼呼叫方法