增删改查xxx111

最新推荐文章于 2022-04-20 09:17:53 发布

twtxby

最新推荐文章于 2022-04-20 09:17:53 发布

阅读量201

点赞数

本文链接：https://blog.csdn.net/xiaozi_01anfen/article/details/78996657

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>form表单验证</title>
<style>
body {
width: 700px;
margin: 0 auto;
}
*{
padding: 0px;
margin: 0px;
}

table {
border: 1px solid;
width: 100%;
padding: 0px;
}

td,th {
border: 1px solid;
}
</style>

<script src="../js/jquery-1.11.1.js"></script>
<script>
$(function() {
var city=[["邯郸","石家庄"],["郑州","安阳"]];
$("#province").change(function(){
$("#cityx").siblings().remove();
var c= $("#province").val();
for(var i=0;i<city[c].length;i++){
var p=$("<option></option>");
p.text(city[i][c]);
$("#city").append(p);
}

});

$("#checkedAll").change(function(){
var isck=this.checked;
//遍历
$("input[name='ck']").each(function(){
$(this).prop("checked",isck);
})
});

$("#deleteAll").click(function(){
var dels= $("input:checked[name='ck']");
if(dels.length==0){
alert("请选择要删除的元素");
return;
}
//获取所有被选中的name为ck的元素
$("input:checked[name='ck']").each(function(){
$(this).parent().parent().remove();
});
});

});
</script>
<script>
function aa() {
var temprows = $("table tr").size();
//创建新的一行
var $tr = $("<tr></tr>");
var $td= $("<td></td>");
$td.append($("<input type='checkbox' name='ck' />"));
$tr.append($td);

//获取所有input下的元素
var xs = $("form :input[type='text']");
for(var i =0;i<xs.length;i++) {
var $td1 = $("<td></td>");
$td1.text(xs[i].value);
//把元素添加到tr中
$tr.append($td1);
}

var va= $("#province option:selected").text();
var $td1 = $("<td></td>");
$td1.text(va);
//把元素添加到tr中
$tr.append($td1);

var va= $("#city").val();

var $td1 = $("<td></td>");
$td1.text(va);
//把元素添加到tr中
$tr.append($td1);

var $td1=$("<td><button οnclick='del(this)'>删除</button> </td>");
//把元素添加到tr中
$tr.append($td1);

$("table").append($tr);
}
//刪除行
function del(e){
e.parentNode.parentNode.remove();
}

</script>
</head>

<body>
<form>
姓名:<input type="text" id="uname" /> email:
<input type="text" id="email" /> 电话:
<input type="text" id="tel" /> 省份:

<select id="province">
<option>---请选择省份</option>
<option value="0">河北省</option>
<option value="1">河南省</option>
</select>
城市:
<select id="city">
<option id="cityx">---请选择城市</option>

</select>
<input id="save" type="button" value="添加" οnclick="aa()" />
</form>
<table>
<tr>
<td colspan="6">
<button id="deleteAll">批量删除</button>
</td>
</tr>
<tr>
<th><input type="checkbox" id="checkedAll" />全选/全不选</th>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>操作</th>
</tr>

</table>
</body>

</html>