PHPでボタンをクリックしてテーブルに行を追加する方法
- PHPzオリジナル
- 2023-03-31 09:07:561083ブラウズ
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'.$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") を使用してループ内に作成します。3 つの新しい <td> 要素を作成し、新しいコンテンツを挿入します。最後に、document.getElementById("myTable").getElementsByTagName('tbody')[0].appendChild(row) を使用して、新しい行要素をテーブルの <tbody>## に挿入します。子要素内の # 。
column = '<input type="text" name="' + (i == 1 ? 'name' : 'age') + rowCount + '">';この方法で実現できます。ボタンをクリックすると、テーブルの行の効果が動的に追加されます。 概要PHP でテーブル行を動的に追加する方法は複雑ではなく、JavaScript を使用して実現できます。この記事の導入により、読者はボタンをクリックした後にテーブルの行を追加する方法を習得したと思います。
以上がPHPでボタンをクリックしてテーブルに行を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：PHPでメソッドを呼び出す方法次の記事：PHPでメソッドを呼び出す方法