jQuery のヒント: テーブルに新しい行を動的に挿入する-jsチュートリアル-php.cn

jQuery のヒント: テーブルに新しい行を動的に挿入する

PHPz

リリース： 2024-02-28 11:51:03

オリジナル

745 人が閲覧しました

jQuery のヒント: テーブルに新しい行を動的に挿入する

タイトル: 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 サイトの他の関連記事を参照してください。