jQuery点击按钮，生成input输入框
需求，点击添加按钮，生成input输入框，如果上一个输入框为空，则弹出提示框提示，若不为空，则生成一行input框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="form-group">
<label class="col-md-1 col-sm-1 col-xs-1 control-label">设备编号:</label>
<div class="col-md-4 col-sm-4 col-xs-4">
<input type="text" class="form-control number" placeholder="请输入编号" id="">
</div>
</div>
</div>
<div id="opts"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<button id="fat-btn" class="btn btn-primary"
type="button">添加
</button>
</div>
</div>
</div>
</body>
<script>
$(function() {
$("#fat-btn").click(function() {
if($(".number:last").val() == "") {
alert(1)
} else {
var htm = "";
htm += " <div class='row'>";
htm += " <div class='form-group'>";
htm += " <label class='col-md-1 col-sm-1 col-xs-1 control-label'>设备编号:</label>";
htm += " <div class='col-md-4 col-sm-4 col-xs-4'>";
htm += " <input type='text' class='form-control number' placeholder='请输入编号' id=''>";
htm += " </div></div>";
htm += "</div>";
$('#opts').append(htm);
}
});
});
</script>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.04.06 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读