from对象和table对象综合实例

来源：互联网发布：我爱摇滚乐知乎编辑：程序博客网时间：2024/06/05 22:30

1.form对象
（1）length:返回大小
（2）item(index):指定取出form对象集合的第几个form对象
说明：当访问某个表单的某个元素的时候，可以document.forms[第几个表单].元素的名字
document.forms.item(第几个表单).元素的名字
表单验证的综合案例：当用户在提交表单的时候，要给出相应的提示信息
这里写图片描述

<html><head><link rel="stylesheet" type="text/css" href="form.css"><script type="text/javascript">function changeAction()  {  var x=document.getElementById("myForm")  alert("Original action: " + x.action)  x.action="index.asp"  alert("New action: " + x.action)  x.submit()  }  function checkinfo(){     span1.innerText="";     span2.innerText="";     span3.innerText="";    //获取表单的用户名    if(document.forms[0].username.value.length<4||document.forms[0].username.value.length>6){        span1.innerText="用户名应在4-6位间";        return false;    }    //判断密码是否ok    if(document.forms[0].pwd1.value.length<=3){        span2.innerText="密码要求大于3位";        return false;     }    if(document.forms[0].pwd1.value!=document.forms[0].pwd2.value){        span3.innerText="输入的两次密码不一样";        return false;    }  }</script></head><body><h1>用户注册</h1><form action=""><table border=0><tr><td class="td1">用户名</td><td class="td2"><input class="style1" type="text" name="username"/><span id="span1"></span></td></tr><tr><td>密  码</td><td><input class="style1" type="password" name="pwd1"/><span id="span2"></span></td></tr><tr><td>确认密码</td><td><input class="style1" type="password" name="pwd2"/><span id="span3"></span></td></tr><tr><td>年   龄</td><td><input class="style1" type="text" name="age"/></td></tr><tr><td>电子邮件</td><td><input class="style1" type="text" name="email"/></td></tr><tr><td>电话号码</td><td><input class="style1" type="text" name="phone"/></td></tr><tr><td><input type="submit" onclick="return checkinfo()" value="注册新用户"/></td><td><input type="reset" value="重新填写"/></td></tr></table></body></html>

说明：在验证表单的时候，可以有两种方式：

<form action="" onsubmit="函数"/>或<input type="submit" onclick="函数"/>

2.table对象
（1）rows[] 表格中所有行的一个数组（针对表格）
（2）cells[] 表格中所有单元格的一个数组（针对一行）
综合案例：表格的自动添加和删除
这里写图片描述

<html><head><script type="text/javascript">function test(){//取出所有行    var myrows=mytab.rows;    //window.alert(myrows.length);    //window.alert(myrows[1].cells[1].innerText);    for(var i=0;i<myrows.length;i++){        //取出一行        //mytab.rows[i] 第i行        var eachRow=myrows[i];        //对该行遍历        //eachRow.cells表示eachRow所有列        for(var j=0;j<eachRow.cells.length;j++){            //取出数据            window.alert(eachRow.cells[j].innerText);        }    }}//演示删除一行function test2(){    mytab.deleteRow(1);}//演示插入一行function test3(){    var tableRow=mytab.insertRow(3);    tableRow.insertCell(0).innerText="3";    tableRow.insertCell(1).innerText="吴用";    tableRow.insertCell(2).innerText="智多星"; }//添加英雄function addHero(){    //遍历整个表格看有没有重复的编号    for(var i=0;i<mytab.rows.length;i++){        var eachRow=mytab.rows[i];        if(eachRow.cells[0].innerText==no.value){            window.alert("编号不能重复");            return;        }    }       //获取用户输入的信息    var newTableRow=mytab.insertRow(mytab.rows.length);    newTableRow.insertCell(0).innerText=no.value;    newTableRow.insertCell(1).innerText=username.value;    newTableRow.insertCell(2).innerText=nickname.value;}</script></head><body><h1>英雄排行榜</h1><table id="mytab" border="1px"><tr><td>排名</td><td>姓名</td><td>外号</td></tr><tr><td>1</td><td>宋江</td><td>及时雨</td></tr><tr><td>2</td><td>卢俊义</td><td>玉麒麟</td></tr></table><input type="button" onclick="test()" value="testing"/><input type="button" onclick="test2()" value="删除一行"/><input type="button" onclick="test3()" value="插入一行"/><h1>请输入新的好汉</h1>编号<input type="text" id="no"/><br/>名字<input type="text" id="username"/><br/>绰号<input type="text" id="nickname"/><br/><input type="button" onclick="addHero()" value="添加"/></body></html>

阅读全文

0 0