Rumah > Artikel > pembangunan bahagian belakang > Bagaimana untuk menambah baris pada jadual dengan mengklik butang dalam php
Bagaimana untuk menambah baris pada jadual dengan mengklik butang dalam php
- PHPzasal
- 2023-03-31 09:07:56992semak imbas
Apabila menggunakan PHP untuk mencipta jadual web, anda selalunya perlu menggunakan fungsi menambah baris. Artikel ini akan memperkenalkan cara menggunakan PHP untuk menambah baris pada jadual apabila butang diklik.
Pertama, kami menyediakan jadual dan menetapkan bilangan baris awal. Kod khusus adalah seperti berikut:
<!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>
Butang <button onclick="addRow()">增加一行</button> ditambah di hujung jadual untuk mencetuskan acara menambah baris. Apabila butang diklik, fungsi addRow() dalam JavaScript akan dipanggil.
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);
}
Dalam kaedah ini, mula-mula dapatkan bilangan baris semasa dalam jadual melalui document.getElementById("myTable").rows.length. Kemudian, gunakan document.createElement("tr") untuk mencipta elemen <tr> baharu, gunakan gelung document.createElement("td") untuk mencipta tiga elemen <td> baharu dan masukkan kandungan baharu. Akhir sekali, gunakan document.getElementById("myTable").getElementsByTagName('tbody')[0].appendChild(row) untuk memasukkan elemen baris baharu ke dalam <tbody> elemen anak jadual.
Perlu diambil perhatian bahawa apabila membuat kotak input baharu, nama perlu ditetapkan kepada nilai yang berbeza Di sini, nombor baris digunakan sebagai akhiran adalah seperti berikut:
column = '<input type="text" name="' + (i == 1 ? 'name' : 'age') + rowCount + '">';
Dengan cara ini Capai kesan menambah baris jadual secara dinamik apabila mengklik butang.
Ringkasan
Kaedah menambah baris jadual secara dinamik dalam PHP tidak rumit dan boleh dicapai dengan bantuan JavaScript. Melalui pengenalan artikel ini, saya percaya bahawa pembaca telah menguasai kaedah menambah baris jadual selepas mengklik butang.
Atas ialah kandungan terperinci Bagaimana untuk menambah baris pada jadual dengan mengklik butang dalam php. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!