由于本身对于JavaScript的学习间断性，学的很不扎实，加上JavaScript对于今后学习的重要性，并且再加上本次又遇到期末复习，所以打算比较系统的重新学习一下JavaScript。下面就是通过3个简单的案例对于这几天已学习到的JS部分知识的练习
- 动态表单（Node的添加删除，属性的动态添加）
表格基本框架的和构建：
<style>
.div01 {
/*border: 1px solid red;*/
width: 600px;
height: 200px;
margin: auto;
text-align: center;
}
tr {
text-align: center;
}
</style>
| 编号 | 姓名 | 性别 | 删除组件 |
| 1 | Caiden_Micheal | 男 | 删除 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
实现方法二：
| 编号 | 姓名 | 性别 | 删除组件 | |
|---|---|---|---|---|
| 1 | OB | 男 | 删除 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
下面就是关于全部选择，全部不选择，以及全部反选的实现：基本代码实现：
window.onload = function () {
var all = document.getElementById(“all”);
var checkbokes = document.getElementsByName(“checkbox”);
all.onclick = function () { //全部选择
for (var i = 0; i <=checkbokes.length-1;i++){
checkbokes[i].checked = true;
}
}
var notall = document.getElementById("notall");
notall.onclick = function () { //全部不选择
for (var i = 0; i <=checkbokes.length-1;i++){
checkbokes[i].checked = false;
}
}
var reverse = document.getElementById("reverse");
reverse.onclick = function () { //全部反选
for (var i = 0; i <=checkbokes.length-1;i++){
checkbokes[i].checked = !checkbokes[i].checked;
}
}
document.getElementById("checkbo").onclick = function () {
// alert(777);
for (var i = 0; i <=checkbokes.length-1;i++){ //点击最上面的单选框全选
// alert(999);
checkbokes[i].checked = this.checked;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
在这里，出现了一个让我想不明白的问题，就是在实现单击顶部单选框的时候实现其他单选框与最顶部单选框的 “checked” 属性保持一致的问题。
下面描述一下问题发现的具体过程：
当我在做 “实现通过单击顶部单选框使得其他单选框和其保持‘checked’属性保持一致”这个的时候，我发现，无论我通过什么办法，此单击事件只能维持原有表单中 tr 单元格的全部选中与全部非选中，然而 对于新动态添加的 tr 单元格中的 单选框 缺没有任何响应。
开始我以为是因为我在动态添加表格数据的时候没有给新添加的单元格赋值 name属性或者name属性赋值的名字与JavaScript中的名字不一样导致，但是，事实证明我的第一个想法错误。
然后，我把目光转向了与其功能基本相同的 “Select All” 按钮上，依照我的看法，这个按钮与顶部单选框触发的事件属于 “比照葫芦画葫芦” 的操作，然后进行验证，此次信心满满，可是，和我想象的完全不一样，几乎相同的验证代码，在“Select All” 按钮上可以实现全选，但对于 顶部的单选框却还是原有的那种情况。然后我开始想着，这两者的区别，一个是按钮，然而另外一个是单选框，然后再一次尝试，事实证明，错误。那就只剩下一种情况了，就是一个在表格外面，一个在表格里面的区别，可是，我该不能为了这样一个功能把所有的单选框另外拿到表格之外吧。所以，我又开始寻找其他原因。
此时，我开始验证点击事件是否发生这个情况上，事实证明，它发生了，并且只发生了一次，还是在未动态添加 tr 单元格的时候，就那么一次。我一头雾水，这踏马什么情况呢，然后尝试着做了非常多的验证，最终，仍未找出结果。
此次遇到的问题，可能与我知识的欠缺有关系，但对于现阶段的我，未有能力达到，我相信随着知识量的储备，在不久的一天，它会被我解开，就像是之前用 Python写web服务器出现的 源码暴露的情况一样，随着我知识量的增加，终会解决。
3.表单验证
表单验证实现的功能有：
用户在表单中输入信息后，鼠标聚焦离开输入框之后进行信息的校验，正确则显示对号图片，错误则提示错误输入
只有全部信息正确才提交表单，否则不提交表单
1.表单框架的构建：
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: url("../img/register_bg.png") no-repeat center;
}
#div00 {
background: white;
border: 8px solid #EEEEEE;
width: 900px;
height: 500px;
margin: auto;
margin-top: 30px;
}
#div01 {
width: 150px;
margin: 20px;
float: left;
}
#div02 {
width: 150px;
margin: 20px;
float: right;
}
#div03 {
margin: 20px;
float: left;
}
#s01 {
color: #FFD026;
font-size: 20px;
}
#s02 {
color: #A6A6A6;
font-size: 20px;
}
#s03 {
font-size: 15px;
text-align: center;
}
#div02 > a {
color: pink;
}
#u_span,#s_span,#e_span,#n_span,#t_span,#c_span {
color: red;
}
.td_left {
width: 80px;
text-align: right;
height: 45px;
}
.td_right {
padding-left: 10px;
}
#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;
}
#td_sub {
padding-left: 150px;
}
#btn_sub {
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
}
</style>
USER REGISTER
<div id="div02">
<span id="s03">已有帐号?</span>
<a href="javascript:void 0">立即登录</a>
</div>
<div id="div03">
<form method="get" id="form">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名(6-12位)">
</td>
<td>
<span id="u_span"></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="请输入密码(6-12位)"></td>
<td>
<span id="s_span"></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="请输入邮箱地址(?@?.com)">
</td>
<td>
<span id="e_span"></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="请输入您真实的名字"></td>
<td>
<span id="n_span"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="tel" name="tel" id="tel" placeholder="请输入手机号(11-14位)"></td>
<td>
<span id="t_span"></span>
</td>
</tr>
<tr>
<td class="td_left">性别</td>
<td class="td_right">
<input type="radio" name="radio" value="male">男
<input type="radio" name="radio" value="female">女
</td>
<td>
<span id="_span"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday"></td>
<td>
<span id="b_span"></span>
</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>
<td>
<span id="c_span"></span>
</td>
</tr>
<tr>
<td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</form>
</div>
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
