我不太擅长JQuery。我只需要在表单中添加“add”和“remove”行,就可以创建一个酒店房间数组。我尝试修改在Internet上找到的代码,得到了以下代码:
<html>
<header>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(function() {
$("#add").click(function() {
div = document.createElement('div');
$(div).addClass("room").html("new Room Type");
$("#roomTypes").append(div);
});
});
</script>
<style>
#container {border: 1px solid red; padding: 10px; width: 100%;}
.inner {border: 1px solid green; margin: 10px; width: auto; height: 20px;}
</style>
</header>
<body>
<h1>Numbers Project</h1>
<p>Version 0.1</p>
<form>
Hotel Name: <input type="text" name="Name" value="Roma Nord"><br>
Hotel Stars: <input type="number" name="Stars" value="3"><br>
<div id="roomTypes">
<div class="room">
Room Type: <input type="text" name="RoomType" value="Double"><br>
</div>
</div>
<button id="add">Add new div</button>
Opening Date: <input type="date" name="OpenDate" value="2021-01-01"><br>
Closing Date: <input type="date" name="CloseDate" value="2021-06-30"><br>
<h3>Previous Year Data</h3>
Rooms sold: <input type="number" name="RoomsSold" value="12000"><br>
Arrivals Presences: <input type="number" name="ArrivalsPresences" value="15000"><br>
Presences: <input type="number" name="Presences" value="23000"><br>
<br><input type="submit" value="Submit">
</form>
</body>
</html>
但是按钮只显示了一秒钟新的Div,然后它就消失了。
<button id="add">Add new div</button>
只有当我把它放在表单外(在正文中)时才起作用。有人能帮我添加这些按钮吗?谢谢你的时间。
1条答案
按热度按时间4uqofj5v1#
要防止
form
提交和重新加载页面,只需添加您的完整代码正在运行:
第一个