需求,点击添加按钮,生成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>
原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq技术交流群聊:649040560。