JQuery 练习
二级联动&&表格操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select>
<option>--请选择--</option>
<option value="0">福建</option>
<option value="1">上海</option>
<option value="2">广东</option>
</select>
<select>
<option>--请选择--</option>
</select>
<hr>
<input type="text" placeholder="员工姓名">
<input type="text" placeholder="员工工资">
<input type="text" placeholder="员工部门">
<input type="button" value="添加">
<hr>
<table>
<tr>
<th>姓名</th>
<th>工资</th>
<th>部门</th>
<th>操作</th>
</tr>
</table>
</body>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var orr = [
["平潭","福州","泉州"],
["浦东","浦西","外滩"],
["广州","东莞","深圳"]
];
$("select:first").change(function () {
$("select:last").html($("<option>--请选择--</option>"));
var va = $("select:first").val();
var cits = orr[va];
for(var i=0;i<orr.length;i++){
var cityName = cits[i];
var city = $("<option>"+cityName+"</option>");
$("select:last").append(city);
}
});
$("input[type='button']").click(function () {
var name = $("input:eq(0)").val();
var sal = $("input:eq(1)").val();
var dept = $("input:eq(2)").val();
var otr = $("<tr></tr>");
var oname = $("<td></td>");
var osal = $("<td></td>");
var odept = $("<td></td>");
var odel = $("<input type='button' value='删除'>");
oname.text(name);
osal.text(sal);
odept.text(dept);
otr.append(oname);
otr.append(osal);
otr.append(odept);
otr.append(odel);
$("table").append(otr);
$("input:last[type='button']").click(function () {
otr.remove();
});
});
</script>
</html>