初学Html5+CSS之用表格创建添加信息表+省市联动+删除

效果图

需要导入的包如下

代码如下

<!DOCTYPE html>
<html>


<head>
<meta charset="UTF-8">
<title></title>
<style>
table {
width: 600px;
border: solid 0px;
text-align: center;
display: none;

}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$("#add").click(function() {
$("table")[0].style.display = "block";
var shengfen = [["西二旗", "西直门"], ["浦东区", "徐汇区"]];

$("#pro").change(function() {

$("#cityx").siblings().remove();
var sheng = $(this).val();//省份对应value
for(var i = 0; i < shengfen[sheng].length; i++) {
var $o = $("<option></option>");//创建option标签
$o.html(shengfen[sheng][i]);
$("#city").append($o);
}
});


var name = $("#name").val();
if(name.length<3)
{
alert("姓名不能小于3");
}
var age = $("#age").val();
var sex = $("#sex").val();
var birth = $("#birth").val();
if(birth=="")
{
alert("请选择生日");
}
var city = $("#city").val();
var tr=$("<tr>");
var td1 = $("<td><input type='checkbox'/></td>");
var td2 = $("<td>").html(name);
var td3 = $("<td>").html(sex);
var td5 = $("<td>").html(birth);
var td6 = $("<td>").html(city);
var td7 = $("<td><button>&nbsp;&nbsp;&nbsp;&nbsp;删除&nbsp;&nbsp;&nbsp;&nbsp;</button></td>");
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td5);
tr.append(td6);
tr.append(td7);
$("tbody").append(tr);//tr--->tbody
$("tbody tr:odd").css("background-color", "#EEEEEE");
$("tbody tr:even").css("background-color", "white");
$("td button").click(function() {
$(this).parent().parent().remove();
$("tbody tr:odd").css("background-color", "#EEEEEE");
$("tbody tr:even").css("background-color", "white");
var trs = $("tbody").children("tr");
if(trs.length == 0) {
$("table")[0].style.display = "none";
}
});


});
});
</script>
</head>


<body>
姓名：<input id="name" /> 
<font>&nbsp;&nbsp;&nbsp;</font>
性别：<select id="sex" style="width: 60px;">
<option value="男">男</option>
<option value="女">女</option>
</select>
<font>&nbsp;&nbsp;&nbsp;</font>
生日：<input id="birth" type="date"/>
<font>&nbsp;&nbsp;&nbsp;</font>
住址：<select id="pro">
<option>---请选择省份</option>
<option value="0">北京</option>
<option value="1">上海</option>
</select>
<select id="city">
<option id="cityx">---请选择城市</option>
</select>


<input type="button" value="添加" id="add" style="background: greenyellow; border-radius: 5px; padding: 5px; width: 90px; margin-left: 50px;" /><br />
<input type="button" style="background: yellow; margin-left: 772px; margin-top: 10px; width: 100px; border-radius: 5px; padding: 5px;" value="全选/反选"/>
<input type="button" style="background: red; margin-top: 10px; margin-left: 15px; width: 100px; border-radius: 5px; padding: 5px;" value="我是删除"/>
<table border="0px solid" background="#999999" style="width: 900px;">
<thead>
<tr style="background: #999999;">
<th><input type="checkbox"/></th>
<th width="240px">姓名</th>
<th width="240px">性别</th>
<th width="240px">生日</th>
<th width="240px">城市</th>
<th width="240px">删除</th>
</tr>
</thead>
<tbody>


</tbody>
</table>
</body>


</html>