ホームページ > 記事 > ウェブフロントエンド > jqueryフォームでクリック時に行を追加する方法
jqueryフォームでクリック時に行を追加する方法
- 青灯夜游オリジナル
- 2022-03-25 18:52:393235ブラウズ
フォームをクリックして行を追加する方法: 1. click() 関数を使用してクリック イベントをフォーム要素にバインドし、イベント処理関数を設定します; 2. イベント処理関数で、フォームに行を追加する append() 関数 コントロールの行を追加します。構文は "$(this).append("フォーム入力コントロール要素");" です。
このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。
jquery フォームの実装クリックして行を追加
実装方法:
click () 関数を使用して、クリック イベントをフォーム要素にバインドし、イベント処理関数を設定します。
イベント処理関数で、append() 関数を使用してフォームに行を追加します。
実装コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("form").click(function() {
$(this).append("<br>其 他: <input>");
});
});
</script>
</head>
<body>
<form style="border: 1px solid red;padding: 10px;">
用户名: <input type="text" name="name"><br>
密 码: <input type='password' name='password'>
</form>
<p>点击表单，增加一行数据</p>
</body>
</html>
説明:
append( ) メソッドでは、要素内の「最後」に Insert コンテンツを追加できます。
構文:
$(A).append(B)
は、A の最後に B を挿入することを意味します。
[推奨学習: jQuery ビデオ チュートリアル 、Web フロントエンド ビデオ ]
以上がjqueryフォームでクリック時に行を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。