Home > Article > Web Front-end > How to add a row on click in jquery form
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='password' name='password'>
</form>
<p>点击表单，增加一行数据</p>
</body>
</html>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!
