Home > Article > Web Front-end > How to add a row on click in jquery form

How to add a row on click in jquery form

青灯夜游Original: 2022-03-25 18:52:393224browse

How to add a row by clicking on the form: 1. Use the click() function to bind the click event to the form element and set the event processing function; 2. In the event processing function, use the append() function to add a row to the form Add a row of controls, the syntax is "$(this).append("Form input control element");".

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

jquery form implementation click to add a row

Implementation method:

Use click () function binds the click event to the form element and sets the event processing function
In the event processing function, use the append() function to add a row to the form

Implementation code:

<!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=&#39;password&#39; name=&#39;password&#39;>
		</form>
		<p>点击表单，增加一行数据</p>
	</body>
</html>

How to add a row on click in jquery form

Description:

append() method can add Insert content "at the end" inside the element.

Syntax:

$(A).append(B)

means inserting B at the end of A.

[Recommended learning: jQuery video tutorial, web front-end video]

The above is the detailed content of How to add a row on click in jquery form. For more information, please follow other related articles on the PHP Chinese website!

jquery append 事件 this

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to remove mouse events in jqueryNext article：How to remove mouse events in jquery

See more

How to add a row on click in jquery form

Related articles