需求柠傍,點(diǎn)擊添加按鈕麸俘,生成input輸入框,如果上一個(gè)輸入框?yàn)榭站宓眩瑒t彈出提示框提示从媚,若不為空,則生成一行input框患整。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" >
<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">設(shè)備編號(hào):</label>
<div class="col-md-4 col-sm-4 col-xs-4">
<input type="text" class="form-control number" placeholder="請(qǐng)輸入編號(hào)" 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'>設(shè)備編號(hào):</label>";
htm += " <div class='col-md-4 col-sm-4 col-xs-4'>";
htm += " <input type='text' class='form-control number' placeholder='請(qǐng)輸入編號(hào)' id=''>";
htm += " </div></div>";
htm += "</div>";
$('#opts').append(htm);
}
});
});
</script>
原文作者:祈澈姑娘 技術(shù)博客:http://www.reibang.com/u/05f416aefbe1
90后前端妹子拜效,愛編程,愛運(yùn)營(yíng)各谚,文藝與代碼齊飛紧憾,魅力與智慧共存的程序媛一枚。
堅(jiān)持總結(jié)工作中遇到的技術(shù)問題昌渤,堅(jiān)持記錄工作中所所思所見赴穗,對(duì)于博客上面有不會(huì)的問題,可以加入qq技術(shù)交流群聊:649040560膀息。