ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML DOM 10 常用场景

2020-07-26 08:00:13  阅读:197  来源: 互联网

标签:10 name 删除 DOM 示例 getElementById HTML var document


示例 1 : 

练习-删除行为前的提示 

在进行删除操作前,都应该提示用户是否要删除

 

 

<script>
function deleteRow(link){
 var b =  confirm("确定删除?")
 if(!b)
   return;
 
var table = document.getElementById("heroTable");
var td = link.parentNode;
var tr = td.parentNode;
var index=tr.rowIndex;
table.deleteRow(index);
 
}
</script>
<table width="100%" border = "1" cellspacing="0" id="heroTable">
 
<tr >
   <td width="50%">英雄名称</td>
   <td>
       操作
   </td>
</tr>
 
<tr >
   <td>盖伦</td>
   <td>
      <a href="#" onclick="deleteRow(this)">删除</a>    
    </td>
</tr>
 
<tr >
   <td>提莫</td>
   <td>
      <a href="#" onclick="deleteRow(this)">删除</a>    
    </td>
</tr>
 
<tr >
   <td>祈求者</td>
   <td>
      <a href="#" onclick="deleteRow(this)">删除</a>    
    </td>
</tr>
 
</table>

 示例 2 : 

练习-登陆时候,验证账号密码是否为空

 

 

<form method="post" action="/study/login.jsp" onsubmit="return login()">
账号:<input id="name" type="text" name="name"> <br/>
密码:<input id="password" type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
   
<script>
  function login(){
   var name = document.getElementById("name");
   if(name.value.length==0){
     alert("用户名不能为空");
     return false;
   }
 
   var password = document.getElementById("password");
   if(password.value.length==0){
     alert("密码不能为空");
     return false;
   }
 
   return true;
 
  }
</script>

示例 3 : 

练习-提交数据,验证长度 

 

<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号:<input id="name" type="text" name="name">
<br><br>
<input type="submit" value="注册">
<br>
</form>
    
<script>
  function register(){
   var name = document.getElementById("name");
   if(name.value.length<3){
     alert("用户名至少需要3位长度");
     return false;
   }
  
   return true;
  
  }
</script>

示例 4 : 

练习-提交数据,验证年龄是否为数字 

 

 

<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号:<input id="name" type="text" name="name">
<br><br>
 
年龄:<input id="age" type="text" name="age">
<br><br>
<input type="submit" value="注册">
<br>
</form>
     
<script>
  function register(){
   var name = document.getElementById("name");
   if(name.value.length<3){
     alert("用户名至少需要3位长度");
     return false;
   }
 
   var age = document.getElementById("age");
   if(age.value.length==0){
     alert("年龄不能为空");
     return false;
   }
   if(isNaN(age.value)){
     alert("年龄必须是数字");
     return false;
   }
   
   return true;
   
  }
</script>

 

标签:10,name,删除,DOM,示例,getElementById,HTML,var,document
来源: https://www.cnblogs.com/JasperZhao/p/13379128.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有