ホームページ > 記事 > ウェブフロントエンド > jQuery のヒント: テーブルに新しい行を動的に挿入する
jQuery のヒント: テーブルに新しい行を動的に挿入する
- PHPzオリジナル
- 2024-02-28 11:51:03691ブラウズ
タイトル: jQuery のヒント: テーブルに新しい行を動的に挿入する
Web 開発では、テーブルに新しい行を動的に挿入する必要があることがよくありますが、この関数は非常に簡単ですjQueryを使って実現します。以下では、jQuery を使用してテーブルに新しい行を動的に挿入する方法を紹介し、具体的なコード例を示します。
まず、CDN リンクまたはローカル ファイルを通じて jQuery ライブラリが HTML ファイルに導入されていることを確認します。以下は、テーブルとボタンを含む単純な HTML 構造です。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态在表格中插入新的行</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <table id="myTable"> <tr> <th>Name</th> <th>Age</th> </tr> </table> <button id="addRowBtn">新增行</button> </body> </html>
次に、ボタンがクリックされたときにテーブルに新しい行を挿入する jQuery コードを記述する必要があります。コードは次のとおりです:
$(document).ready(function() {
$('#addRowBtn').click(function() {
var name = prompt('请输入姓名：');
var age = prompt('请输入年龄：');
var newRow = '<tr><td>' + name + '</td><td>' + age + '</td></tr>';
$('#myTable').append(newRow);
});
});上記のコードでは、ドキュメントが読み込まれた後、最初にボタンのクリック イベントをバインドします。ボタンをクリックすると、名前と年齢を入力するための 2 つのプロンプト ボックスが表示されます。それぞれ、入力された値を新しいテーブル行に連結する HTML コードです。最後に、jQuery の append() メソッドを使用して、テーブルに新しい行を挿入します。
これで、テーブルに新しい行を動的に挿入する機能が完了しました。上記の HTML および jQuery コードをコピーして HTML ファイルに貼り付け、ブラウザで開き、ボタンをクリックして効果をテストできます。この例を通して、jQuery を使用してテーブルに新しい行を動的に挿入する方法を学ぶのに役立つことを願っています。
以上がjQuery のヒント: テーブルに新しい行を動的に挿入するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。