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

来源:互联网 发布:linux数据库备份命令 编辑:程序博客网 时间:2024/05/29 03:05
<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>
原创粉丝点击