<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js"></script>
<style>
table {
border-collapse: collapse;
margin-top: 20px;
}
table tr td {
border: 1px solid black;
height: 25px;
}
.tr01 {
background: #999999;
}
.w60 {
width: 80px;
}
.w100 {
width: 120px;
}
table tr:nth-child(2n) {
background: #eeeeee;
}
</style>
</head>
<body>
<form>
姓名:<input type="text" id="name" /> 性别:
<select id="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
生日:<input type="date" id="tiem"> 住址:
<select id="zz" onchange="change()">
<option selected="selected">北京</option>
<option>山西</option>
<option>辽宁</option>
</select>
<select id="qu">
<option selected="selected">海淀区</option>
<option>太原</option>
<option>海城市</option>
</select>
<input type="button" value="添加" style="background: #99ff00;" id="bt" />
</form>
<table>
<tr class="tr01">
<td class="w60"><input type="checkbox" class="checkAll>" </td>
<td class="w60">姓名</td>
<td class="w60">性别</td>
<td class="w100">生日</td>
<td class="w100">住址</td>
<td class="w60">删除</td>
</tr>
</table>
<tbody>
</tbody>
<script type="text/javascript">
$(function() {
$("#bt").click(function() {
var name = $("#name").val();
var sex = $("#sex").val();
var tiem = $("#tiem").val();
var zz = $("#zz").val();
var qu = $("#qu").val();
var tr = $("<tr><td><input type='checkbox' name='checked'></td><td>" + name + "</td><td>" + sex + "</td><td>" + tiem + "</td><td>" + zz + "-" + qu + "</td><td><button>删除</button></td></tr>");
$("table").append(tr);
$("form")[0].reset();
})
});
//删除
$("tbody").on("click", "button", function() {
var b = confirm("是否删除");
if(b) {
$(this).parents("tr").remove();
n--;
console.log($("tbody input").length);
}else{
return false;
}
});
function change() {
var x = document.getElementById("zz");
var y = document.getElementById("qu");
y.options.length = 0; // 清除second下拉框的所有内容
if(x.selectedIndex == 0) {
y.options.add(new Option("海淀区", "海淀区", false, true)); // 默认选中省会城市
y.options.add(new Option("朝阳区", "朝阳区"));
y.options.add(new Option("东城区", "东城区"));
y.options.add(new Option("房山区", "房山区"));
}
if(x.selectedIndex == 1) {
y.options.add(new Option("太原市", "太原市", false, true)); // 默认选中省会城市
y.options.add(new Option("吕梁市", "吕梁市"));
y.options.add(new Option("大同市", "大同市"));
}
if(x.selectedIndex == 2) {
y.options.add(new Option("大连市", "大连市"));
y.options.add(new Option("沈阳市", "沈阳市", false, true)); // 默认选中省会城市
y.options.add(new Option("丹东市", "丹东市"));
}
}
</script>
</body>
</html>
html+jquery
最新推荐文章于 2024-04-07 20:26:20 发布