DOM节点操作增删改_dom节点增删改-优快云博客

本文链接：https://blog.youkuaiyun.com/zhlx2835/article/details/79224342

本文介绍了一个使用HTML、CSS和JavaScript实现的表单验证及动态加载城市列表的例子。该示例包括了基本的表单字段验证，如邮箱格式检查、电话号码长度验证等，并通过下拉列表实现了省份选择后对应城市的动态加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

html结构：

<form>
<fieldset>
<legend>添加用户</legend>
<label>
用户名:
<input id="uname" />
</label>
<label>
邮箱:
<input id="email" />
<span id="t_email"></span>
</label>
<label>
性别:
<input name="sex" type="radio" value="男" checked="checked" />男

<input name="sex" type="radio" value="女" />女
</label>
<label>
电话:
<input id="tel" />
<span id="t_tel"></span>
</label>
<label>
省份:
<select id="pro" >
<option value="">--请选择省份--</option>
<option value="0">河南</option>
<option value="1">河北</option>
<option value="2">北京</option>
</select>
城市:
<select id="city">
<option id="xz" value="">--请选择城市--</option>
</select>

<span id="t_address"></span>
</label>

<input type="button" value="保存" οnclick="save()" />

</fieldset>
</form>

<h2>学生信息</h2>
<table border="1px">
<tr>
<td colspan="7">
<input type="button" value="批量删除" οnclick="delAll()" />
</td>
</tr>
<tr>
<td><input type="checkbox" id="flagck" οnclick="ckall()" /></td>
<td>姓名</td>
<td>邮箱</td>
<td>性别</td>
<td>电话</td>
<td>地址</td>
<td>操作</td>
</tr>
</table>

--------------------------------------js代码--------------------------------------------------------------

<head>
<meta charset="UTF-8">
<title></title>
<style>
form label{
display: block;
margin: 10px;
}
form span{
color: red;
}
</style>

<script src="../js/jquery-1.11.1.js"></script>
<script>
//等待文档加载完成
$(function(){
var citys=[["安阳","濮阳","郑州"],["邯郸","保定"],["海淀","朝阳","xxx","yyy"]];

//添加点击事件
$("#pro").change(function(){
//获取省份的位置
var pro_index= $("#pro").val(); //河南===> pro_index=0;
$("#xz").siblings().remove(); //每次重新选择省份--->城市清空

for(var i=0;i< citys[pro_index].length;i++){
var c= $("<option></option>");
c.text(citys[pro_index][i]);
$("#city").append(c); //把创建的option 添加到city
}
});

});

//创建函数
function save(){
var stu={uname:"高运娜"};
//存放错误信息的数组
var erros=[];

//1 验证邮箱,email:"gaoyn@126.com"
var v_ema= $("#email").val();
if(v_ema==undefined||v_ema==""){
erros.push(1);
$("#t_email").text("邮箱不能为空");
}else if(v_ema.indexOf("@")==-1){
erros.push(1);
$("#t_email").text("邮箱中必须有@");
}else{
$("#t_email").text("");
stu.email=v_ema;
}

//2 获取地址
var pro=$("#pro option:selected").text();
var city=$("#city option:selected").text();

if(pro=="--请选择省份--"||city=="--请选择城市--"){
erros.push("4");
$("#t_address").text("省份和城市必须是有效值");
}else{
stu.address=pro+"-"+city;
$("#t_address").text("");
}

//3 验证电话必须在8-11位之间数字 ,tel:13522746372
var v_tel=$("#tel").val();
console.log("电话",v_tel=="");
console.log("电话",v_tel==undefined);

stu.tel=v_tel;

//4 获取性别的值
stu.sex=$("[name='sex']:checked").val();

//创建stu
if(erros.length==0){
add_table(stu);

}

}

//添加到table中的方法
function add_table(stu){
var tr=$("<tr></tr>");
var td0=$("<td><input type='checkbox' name='ck'/></td>")
var td1=$("<td>"+stu.uname+"</td>");
var td2=$("<td>"+stu.email+"</td>");
var td3=$("<td>"+stu.sex+"</td>");
var td4=$("<td>"+stu.tel+"</td>");
var td5=$("<td>"+stu.address+"</td>")
var td6=$("<td><input type='button' value='删除' /></td>")

tr.append(td0).append(td1).append(td2).append(td3).append(td4).append(td5).append(td6);
$("table").append(tr);
}

//实现全选全不选的操作
function ckall(){
//找到name为ck的所有的元素
$("[name='ck']").prop("checked",$("#flagck")[0].checked);
}

function delAll(){
var cks= $("[name='ck']:checked").size();
if(cks==0){
alert("请选择要删除的元素");
return;
}
$("[name='ck']:checked").parent().parent().remove(); //删除选择的所有元素

}

</script>
</head>