您的位置：首页 > Web前端 > JavaScript

jsday09(table综合练习 通过指针操作数组 部分正则验证)

2017-09-02 10:19 337 查看 
<style type="text/css">
table{
border:#00F 1px solid;
width:60%;
}
table td,table th{
border:#0F9 1px solid;
}
table th{
background-color:#33C;
}
.one{
background-color:#FC3;
}
.two{
background-color:#9FF;
}
.over{
background-color:#369;
}
</style>
<script type="text/javascript">
//行颜色间隔显示 并高亮
var name;
function trColor()
{
var tabNode = document.getElementsByTagName("table")[0];
var trs  = tabNode.rows;
for(var x =1 ; x<trs.length-1;x++)
{
if(x%2==1)
trs[x].className="one";
else
trs[x].className="two";
trs[x].onmouseover=function()
{
name = this.className;
this.className="over";
}
trs[x].onmouseout= function()
{
this.className=name;
}
}
}
window.onload=trColor;
//完成 checkbox的全选动作
function checkAll(index)
{
var allNode = document.getElementsByName("all")[index];
var mails = document.getElementsByName("mail");
for(var x = 0;x<mails.length;x++)
{
mails[x].checked = allNode.checked;
}
}
//完成按钮的选取
function checkByButton(num)
{
var mails = document.getElementsByName("mail");
for(var x =0 ;x<mails.length;x++)
{
if(num>1)
mails[x].checked = !mails[x].checked;
else
mails[x].checked = num;
}
}
//删除所选邮件
function delMail()
{
if(!window.confirm("真的要删除所选邮件"))
return;
var mails = document.getElementsByName("mail");
var arr = new Array();
var pos = 0;
for(var x =0 ;x<mails.length;x++)
{
if(mails[x].checked)
{
var trNode = mails[x].parentNode.parentNode;
arr[pos++]=trNode;
}
}
for(var x= 0 ;x<arr.length;x++)//为了防止自增后留下的那个行放进数组中统一删除
{
var trNode = arr[x];
trNode.parentNode.removeChild(trNode);
}
trColor();

}
</script>
</head>

<body>
<table>
<tr>
<th><input type="checkbox" name="all" onclick="checkAll(0)"/>全选</th>
<th></th>
<th></th>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三1</td>
<td>新的邮件</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三2</td>
<td>新的邮件</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三3</td>
<td>新的邮件</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三4</td>
<td>新的邮件</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三5</td>
<td>新的邮件</td>
</tr>
<tr>
<th><input type="checkbox" name="all" onclick="checkAll(1)" />全选</th>
<th colspan="2">
<input type="button" value="全选" onclick="checkByButton(1)" />
<input type="button" value="取消全选" onclick="checkByButton(0)"  />
<input type="button" value="反选" onclick="checkByButton(2)" />
<input type="button" value="删除所选邮件" onclick="delMail()"  />

</th>
<th></th>
</tr>

</table>
</body>


<script type="text/javascript" src="doctool.js"></script>
<style type="text/css">
#yes,#no{
display:none;
}
</style>
<script type="text/javascript">
function checkUser(userNode)
{
//alert(userNode.value);
var name = userNode.value;
var reg = new RegExp("^[a-z]{5}$");//头和尾先判断不然容易出错 固定长度
var spanNode = byId("yes");
var spanNode2 = byId("no");
if(name.match(reg))
{
//spanNode.innerHTML="用户名正确".fontcolor("green");
spanNode.style.display="inline";
spanNode.style.color="green";
spanNode2.style.display="none";
}
else
{
//spanNode.innerHTML="用户名错误".fontcolor("red");
spanNode2.style.display="inline";
spanNode2.style.color="red";
spanNode.style.display="none";
}
}
</script>
</head>

<body>
<form>
用户名称<input type="text" name="user" onblur="checkUser(this)" />
<span id="yes">用户名正确</span><span id="no">用户名错误</span><br/>
输入密码<input type="text" name="psw" /><br/>
确认密码<input type="text" name="repsw" /><br/>
邮件地址<input type="text" name="mail" /><br/>
<input type="submit" name="提交数据" value="提交1"/>

</form>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航