動態建立表格;驗證資料,全選和反選,批量刪除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
td {
width: 100px;
text-align: center;
}
tr {
background: #d0d0d0;
}
tr:nth-child(2n) {
background: #ffffff;
}
tr {
background-color: expression((this.sectionRowIndex % 2==0) ? "#FF3": "#6F9");
}
</style>
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//點選建立表格新增資料
$("#tian").click(function() {
var name = $("#name").val();
//得到性別下的下拉選單選中的
var xing = $("#xing option:checked").html();
var sheng = $("#sheng").val();
//得到省下的下拉選單的選擇的
var di = $("#di option:checked").html();
var zhi = $("#zhi").val();
if(name.length < 3 || name.length > 30) {
alert("姓名輸入錯誤");
return false;
}
if(sheng == "" || sheng == null) {
alert("生日不能為空");
return false;
}
var table = $("table");
var tr = $("<tr></tr>");
//在表格中tr裡,第一個表格是一個複選框
var td0 = $("<td><input type='checkbox' name='quan' /> </td>");
var td1 = $("<td>" + name + "</td>");
var td2 = $("<td>" + xing + "</td>");
var td3 = $("<td>" + sheng + "</td>");
var td4 = $("<td>" + di + "-" + zhi + "</td>");
//在表格中tr裡,最後一個是刪除按鈕
var td6 = $("<td><button id='btn1'>刪除</button></td>");
tr.append(td0);
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
tr.append(td6);
table.append(tr);
//點選刪除;;;刪除tr一行
$("td").children("button").click(function() {
alert("刪除成功")
//找到當前標籤的父元素的父元素然後刪除
this.parentNode.parentNode.remove();
});
});
//全選反序
$("#fan").click(function() {
//找到input下checkbox;;name是quan的
var ck=$("input:checkbox[name='quan']");
for (var i=0;i<ck.length;i++) {
//判斷是否選中
//選中的情況下就不選中
if(ck[i].checked){
ck[i].checked=false;
}
//不選中的情況下就選中
else{
ck[i].checked=true;
}
}
});
//選中的省市,預設北京西二旗
$("#di").change(function() {
var data = [
["西二旗", "東城", "朝陽"],
["廊坊", "保定", "邯鄲"],
["鄭州", "洛陽", "濮陽"]
];
// $("#shan").parent().children().remove();
//刪除省下的孩子元素
$("#zhi option").remove();
for(var i = 0; i < data.length; i++) {
var datas = $(this).val();
var tianjia = $("<option>" + data[datas][i] + "</option>");
$("#zhi").append(tianjia);
}
});
/////////
//選中的複選框;;;;;選中的全選和反選
$("#jizhu").change(function(){
var ck=$("input:checkbox[name='quan']");
for (var i=0;i<ck.length;i++) {
if(ck[i].checked){
ck[i].checked=false;
}else{
ck[i].checked=true;
}
}
});
//批量刪除,複選框選中的刪除,如果沒有選中請勾選
$("#sel").click(function(){
var ck=$("input:checkbox[name='quan']:checked");
if(ck.length>0){
for (var i=0;i<ck.length;i++) {
ck[i].parentNode.parentNode.remove();
}
}else{
alert("請勾選");
}
});
});
</script>
</head>
<body>
姓名<input type="text" id="name" /> 性別
<select id="xing">
<option>男</option>
<option>女</option>
</select>
生日<input type="text" id="sheng" /> 地址
<select id="di">
<option value="0">北京</option>
<option value="1">河北</option>
<option value="2">河南</option>
</select>
<select id="zhi">
<option id="shan">西二旗</option>
</select>
<input style="margin-left: 30px; background: greenyellow;" type="button" value="新增" id="tian" />
<br />
<br />
<input style="margin-left: 450px; background: yellow;" type="button" value="全選/反選" id="fan" />
<input style="margin-left: 40px; background: red;" type="button" value="批量刪除" id="sel" />
<br />
<br />
<table border="1px" cellspacing="0" cellpadding="0">
<tr style="background: #5b5b5b;">
<th><input type="checkbox" id="jizhu" /></th>
<th>姓名</th>
<th>性別</th>
<th>生日</th>
<th>住址</th>
<th>刪除</th>
</tr>
</table>
</body>
</html>