PHPでボタンをクリックしてテーブルに行を追加する方法

PHPz
リリース: 2023-03-31 09:45:08
オリジナル
853 人が閲覧しました

PHP を使用して Web テーブルを作成する場合、多くの場合、行を追加する機能を使用する必要があります。この記事では、PHPを使用して、ボタンがクリックされたときにテーブルに行を追加する方法を紹介します。

まず、テーブルを用意し、初期行数を設定します。具体的なコードは次のとおりです。

   PHP 点击按钮表格增加一行  
'; echo ''; echo ''; echo ''; echo ''; } ?>
编号 姓名 年龄
'.$i.'

ログイン後にコピー

テーブルの最後にボタンが追加されます,行追加イベントをトリガーするために使用されます。ボタンをクリックすると、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 = ''; } // 插入新的内容到 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")を使用して新しい要素を作成し、document.createElement("td")を使用してループ内に作成します。3 つの新しい要素を作成し、新しいコンテンツを挿入します。最後に、document.getElementById("myTable").getElementsByTagName('tbody')[0].appendChild(row)を使用して、新しい行要素をテーブルの## に挿入します。子要素内の # 。

新しい入力ボックスを作成するときは、名前を別の値に設定する必要があることに注意してください。ここでは、行番号がサフィックスとして使用されます。具体的なコードは次のとおりです:

column = '';
ログイン後にコピー
この方法で実現できます。ボタンをクリックすると、テーブルの行の効果が動的に追加されます。

概要

PHP でテーブル行を動的に追加する方法は複雑ではなく、JavaScript を使用して実現できます。この記事の導入により、読者はボタンをクリックした後にテーブルの行を追加する方法を習得したと思います。

以上がPHPでボタンをクリックしてテーブルに行を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!