from对象和table对象综合实例

最新推荐文章于 2018-10-16 18:36:16 发布

yanner_

最新推荐文章于 2018-10-16 18:36:16 发布

阅读量263

点赞数

分类专栏： JavaScript 文章标签：对象 table form 表单

本文链接：https://blog.csdn.net/yanner_/article/details/78321618

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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>

yanner_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
from对象和table对象综合实例

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

扫一扫