案例:动态的对表格进行增加与删除
* 分析：
* 添加：
1. 给添加按钮绑定单击事件
2. 获取文本框的内容
3. 创建td，设置td的文本为文本框的内容。
4. 创建tr
5. 将td添加到tr中
6. 获取table，将tr添加到table中
* 删除：
1.确定点击的是哪一个超链接
<a href="javascript:void(0);" onclick="delTr(this);" >删除</a>
2.怎么删除？
removeChild():通过父节点删除子节点
* 思路：
1，给某个元素添加子节点：
A，先创建子节点 B，获得父节点 C，通过父节点添加子节点 appendChild(子节点);
2, 想删除某个节点：
A,先得到父节点 parentNode B,再根据父节点删除子节点 removeChild(子节点)
* 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态网格</title>
<style>
div{
text-align: center;
margin: 50px;
}
#sid{
margin-top: 70px;
}
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
</style>
</head>
<body>
<div class="d1">
<input type="text" placeholder="请输入编号" id="sid">
<input type="text" placeholder="请输入姓名" id="sname">
<input type="text" placeholder="请输入性别" id="sgender">
<input type="button" id="btn" value="添加">
</div>
<table id="table">
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="#" onclick="del(this);">删除</a></td>
</tr>
<tr>
<td>1</td>
<td>任我行</td>
<td>男</td>
<td><a href="#" onclick="del(this);">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="#" onclick="del(this);">删除</a></td>
</tr>
</table>
<script>
//获取点击事件
var btn = document.getElementById("btn");
//使用Node节点完成对table的动态添加的操作
/*btn.onclick = function () {
//获取输入的值
var sid = document.getElementById("sid").value;
var sname = document.getElementById("sname").value;
var sgender = document.getElementById("sgender").value;
//获取表格
var table = document.getElementById("table");
//创建tr
var tr = document.createElement("tr");
//创建td
var td_id = document.createElement("td");
var text_id = document.createTextNode(sid);
td_id.appendChild(text_id);
tr.appendChild(td_id);
//创建td
var td_name = document.createElement("td");
var text_name = document.createTextNode(sname);
td_name.appendChild(text_name);
tr.appendChild(td_name);
//创建td
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(sgender);
td_gender.appendChild(text_gender);
tr.appendChild(td_gender);
//创建td
var td_option = document.createElement("td");
//创建a
var a = document.createElement("a");
a.setAttribute("href","#")
a.setAttribute("onclick","del(this)");
var text_a = document.createTextNode("删除");
a.appendChild(text_a);
td_option.appendChild(a);
tr.appendChild(td_option);
table.appendChild(tr);
}*/
btn.onclick = function () {
//获取输入的值
var sid = document.getElementById("sid").value;
var sname = document.getElementById("sname").value;
var sgender = document.getElementById("sgender").value;
//使用innerHTML来实现对案例的简化
var table = document.getElementById("table");
table.innerHTML+= "<tr>\n" +
" <td>"+sid+"</td>\n" +
" <td>"+sname+"</td>\n" +
" <td>"+sgender+"</td>\n" +
" <td><a href=\"#\" onclick=\"del(this);\">删除</a></td>\n" +
" </tr>"
};
//删除一行tr
function del(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
案例:对表格进行全选,反选,全不选操作
* 分析
1.全选
1.绑定点击事件
2.通过document.getElementByClassName("cb")来获取所有的check一列的对象
3.遍历数组,对td进行checked的属性的更改(全部都选择)
2.全不选
1.绑定点击事件
2.通过document.getElementByClassName("cb")来获取所有的check一列的对象
3.遍历数组,对td进行checked的属性的更改(全部都不选择)
3.反选
1.绑定点击事件
2.通过document.getElementByClassName("cb")来获取所有的check一列的对象
3.遍历数组,对td进行checked的属性的更改(改为原来的取反)
* 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格全选</title>
<style>
table {
border: 1px solid;
width: 500px;
margin-left: 30%;
}
td, th {
text-align: center;
border: 1px solid;
}
div {
margin-top: 10px;
margin-left: 30%;
}
.in {
background-color: pink;
}
.out {
background-color: white;
}
</style>
<script>
//定义窗口加载完毕的事件
window.onload = function () {
//全选
/*
分析: 1.绑定点击事件
2.通过document.getElementByClassName("cb")来获取所有的check一列的对象
3.遍历数组,对td进行checked的属性的更改(全部都选择)
*/
// 1.绑定点击事件
var selectAll = document.getElementById("selectAll");
selectAll.onclick = function () {
//2.通过document.getElementByClassName("cb")来获取所有的check一列的对象
var trs = document.getElementsByClassName("cb");
//3.遍历数组,对td进行checked的属性的更改(全部都选择)
for (var i = 0; i < trs.length; i++) {
trs[i].checked = true;
}
};
//全不选
/*
分析: 1.绑定点击事件
2.通过document.getElementByClassName("cb")来获取所有的check一列的对象
3.遍历数组,对td进行checked的属性的更改(全部都不选择)
*/
// 1.绑定点击事件
var unselectAll = document.getElementById("unSelectAll");
unselectAll.onclick = function () {
//2.通过document.getElementByClassName("cb")来获取所有的check一列的对象
var trs = document.getElementsByClassName("cb");
//3.遍历数组,对td进行checked的属性的更改(全部都不选择)
for (var i = 0; i < trs.length; i++) {
trs[i].checked = false;
}
};
//反选
/*
分析: 1.绑定点击事件
2.通过document.getElementByClassName("cb")来获取所有的check一列的对象
3.遍历数组,对td进行checked的属性的更改(改为原来的取反)
*/
// 1.绑定点击事件
var selectRev = document.getElementById("selectRev");
selectRev.onclick = function () {
//2.通过document.getElementByClassName("cb")来获取所有的check一列的对象
var trs = document.getElementsByClassName("cb");
//3.遍历数组,对td进行checked的属性的更改(全部都取反)
for (var i = 0; i < trs.length; i++) {
trs[i].checked = !trs[i].checked;
}
};
//第一个选择,其他的也会跟着选择
/*
分析:
1.获取 firstCb
2.绑定点击事件
2.通过document.getElementByClassName("cb")来获取所有的check一列的对象
3.遍历数组,对td进行checked的属性的更改(参考第一个的cb值)
*/
// 1.绑定点击事件
var firstCb = document.getElementById("firstCb");
//firstCb.onchange = function () {
firstCb.onclick = function () {
//2.通过document.getElementByClassName("cb")来获取所有的check一列的对象
var trs = document.getElementsByClassName("cb");
//3.遍历数组,对td进行checked的属性的更改(参考第一个checked的状态)
for (var i = 1; i < trs.length; i++) {
trs[i].checked = firstCb.checked;
}
};
//定义鼠标的进入和出去事件
/*
分析:
1.通过document.getElementByTagName("cb")来获取所有的tr对象数组
2.遍历数组
3.对每一个tr进行鼠标事件的绑定
*/
//1.通过document.getElementByTagName("tr")来获取所有的tr对象数组
var trs = document.getElementsByTagName("tr");
//2.遍历数组
for (var i = 0; i < trs.length; i++) {
//3.对每一个tr进行鼠标事件的绑定
trs[i].onmouseover = function () {
this.className = "in";
};
trs[i].onmouseout = function () {
this.className = "out";
};
}
}
</script>
</head>
<body>
<table>
<caption>学生信息表</caption>
<tr>
<th><input type="checkbox" class="cb" id="firstCb">全选</th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="cb"></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="cb"></td>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="cb"></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
</table>
<div>
<input type="button" id="selectAll" value="全选">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectRev" value="反选">
</div>
</body>
</html>
案例:使用js正则对页面进行表单的验证
* 分析
1.写好校验每个的input的方法(方法内部使用正则来判断)
checkUsername()
checkPassword()
checkEmail()
checkName()
checkTel()
2.在form.onsubmit中调用上面写的校验方法
document.getElementById("form1").onsubmit = function () {
return checkUsername() && checkPassword() && checkEmail() &&checkName() && checkTel();
}
* 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background: url("img/register_bg.png") no-repeat center;
padding-top: 25px;
}
.rg_layout {
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
}
.rg_left {
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child {
color: #FFD026;
font-size: 20px;
}
.rg_left > p:last-child {
color: #A6A6A6;
font-size: 20px;
}
.rg_center {
float: left;
/* border: 1px solid red;*/
}
.rg_right {
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child {
font-size: 15px;
}
.rg_right p a {
color: pink;
}
.td_left {
width: 100px;
text-align: right;
height: 45px;
}
.td_right {
padding-left: 50px;
}
#username, #password, #email, #name, #tel, #birthday, #checkcode {
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode {
width: 110px;
}
#img_check {
height: 32px;
vertical-align: middle;
}
#btn_sub {
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
}
#sunbtn {
padding-left: 150px;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!--定义表单 form-->
<form action="javascript:void(0);" method="get" id="form1">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right">
<input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="user_name"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right">
<input type="password" name="password" id="password" placeholder="请输入密码">
<span id="password_1"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right">
<input type="email" name="email" id="email" placeholder="请输入邮箱">
<span id="email_1"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right">
<input type="text" name="name" id="name" placeholder="请输入姓名">
<span id="name_1"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right">
<input type="text" name="tel" id="tel" placeholder="请输入手机号">
<span id="tel_1"></span>
</td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">
</td>
</tr>
<tr>
<td class="td_left"><label for="checkcode">验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img id="img_check" src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" id="sunbtn"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录</a></p>
</div>
</div>
<script>
window.onload = function () {
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
document.getElementById("email").onblur = checkEmail;
document.getElementById("name").onblur = checkName;
document.getElementById("tel").onblur = checkTel;
document.getElementById("form1").onsubmit = function () {
return checkUsername() && checkPassword() && checkEmail() &&checkName() && checkTel();
}
};
//校验username
function checkUsername() {
var username = document.getElementById("username").value;
var reg = /^\w{3,12}$/;
var flag = reg.test(username);
var user_name = document.getElementById("user_name");
if (flag){
user_name.innerHTML = "<img height='25' width='35' src='img/gou.png' />"
}else {
user_name.innerHTML = "<font color='red'>用户名格式不正确</font>"
}
return flag;
};
//校验password
function checkPassword(){
var password = document.getElementById("password").value;
var reg = /^\w{3,12}$/;
var flag = reg.test(password);
var pass_word = document.getElementById("password_1");
if (flag){
pass_word.innerHTML = "<img height='25' width='35' src='img/gou.png' />"
}else {
pass_word.innerHTML = "<font color='red'>密码格式不正确</font>"
}
return flag;
};
//校验email
function checkEmail(){
var email = document.getElementById("email").value;
var reg = /^\w{3,13}@\w{1,3}.\w{2,3}$/;
var flag = reg.test(email);
var email_1 = document.getElementById("email_1");
if (flag){
email_1.innerHTML = "<img height='25' width='35' src='img/gou.png' />"
}else {
email_1.innerHTML = "<font color='red'>邮箱格式不正确</font>"
}
return flag;
};
//校验name
function checkName(){
var name = document.getElementById("name").value;
//汉字的正则
var reg = /^[\u4e00-\u9fa5]{2,15}$/;
var flag = reg.test(name);
var name_1 = document.getElementById("name_1");
if (flag){
name_1.innerHTML = "<img height='25' width='35' src='img/gou.png' />"
}else {
name_1.innerHTML = "<font color='red'>姓名格式不正确</font>"
}
return flag;
};
//校验手机号
function checkTel(){
var tel = document.getElementById("tel").value;
var reg = /^1[3456789]\d{9}$/;
var flag = reg.test(tel);
var tel_1 = document.getElementById("tel_1");
if (flag){
tel_1.innerHTML = "<img height='25' width='35' src='img/gou.png' />"
}else {
tel_1.innerHTML = "<font color='red'>手机号格式不正确</font>"
}
return flag;
};
</script>
</body>
</html>