HTML DOM系列教材（十一）- 常用场景

工具版本兼容问题

所谓的常用场景指的是工作中会经常用到的javascript结合HTML DOM运用。

纠

示例 1 : 练习-删除行为前的提示
示例 2 : 答案-删除行为前的提示
示例 3 : 练习-登陆时候，验证账号密码是否为空
示例 4 : 答案-登陆时候，验证账号密码是否为空
示例 5 : 练习-提交数据，验证长度
示例 6 : 答案-提交数据，验证长度
示例 7 : 练习-提交数据，验证年龄是否为数字
示例 8 : 答案-提交数据，验证年龄是否为数字
示例 9 : 练习-提交数据，验证年龄是否为整数
示例 10 : 答案-提交数据，验证年龄是否为整数
示例 11 : 练习-提交数据，验证email格式是否正确
示例 12 : 答案-提交数据，验证email格式是否正确
示例 13 : 练习-隐藏和显示
示例 14 : 答案-隐藏和显示

示例 1 :

练习-删除行为前的提示

edit 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

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

代码行数较多，请点击查看

<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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 2 :

答案-删除行为前的提示

edit 顶折

纠问

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

查看本答案会花费3个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

运行效果

代码行数较多，请点击查看

<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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 3 :

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

edit 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

比如在登陆的时候，如果账号或者密码为空，弹出提示，并且不提交

代码行数较多，请点击查看

<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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 4 :

答案-登陆时候，验证账号密码是否为空

edit 顶折

纠问

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

查看本答案会花费3个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

运行效果

代码行数较多，请点击查看

<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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 5 :

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

edit 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

比如注册用户名的时候，用户名至少需要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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 6 :

答案-提交数据，验证长度

edit 顶折

纠问

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

查看本答案会花费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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 7 :

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

edit 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

比如注册的时候，需要提交年龄信息，用户输入的年龄信息必须是数字的。

代码行数较多，请点击查看

<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(isNaN(age.value)){
     alert("年龄必须是数字");
     return false;
   }
  
   return true;
  
  }
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 8 :

答案-提交数据，验证年龄是否为数字

edit 顶折

纠问

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

查看本答案会花费3个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

运行效果

代码行数较多，请点击查看

<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>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 9 :

练习-提交数据，验证年龄是否为整数

edit 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

上一个练习有个缺陷，即当年龄输入是小数的时候，也能够通过判断。
那么接下来就要求，年龄只能输入整数，小数也不行

代码行数较多，请点击查看

<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(parseInt(age.value)!=age.value){
     alert("年龄必须是整数");
     return false;
   }
   return true;
  }
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 10 :

答案-提交数据，验证年龄是否为整数

edit 顶折

纠问

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

查看本答案会花费3个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

运行效果

代码行数较多，请点击查看

<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(parseInt(age.value)!=age.value){
     alert("年龄必须是整数");
     return false;
   }
   return true;
  }
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 11 :

练习-提交数据，验证email格式是否正确

edit 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

比如注册的时候，需要提交email信息，用户输入的email信息必须是电子邮箱格式的。

代码行数较多，请点击查看

<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>
  
EMail：<input id="email" type="text" name="email"> 
<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(isNaN(age.value)){
     alert("年龄必须是数字");
     return false;
   }
  
  var email = document.getElementById("email");
       
  if(0==email.value.length){
     alert("email不能为空");
    return false;
  }
    
  var Regex = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/;       
    
  if (!Regex.test(email.value)){                
       alert("email格式不正确");
       return false;
  }            
   return true;
  }
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 12 :

答案-提交数据，验证email格式是否正确

edit 顶折

纠问

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

查看本答案会花费3个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

运行效果

代码行数较多，请点击查看

<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>
  
EMail：<input id="email" type="text" name="email"> 
<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(isNaN(age.value)){
     alert("年龄必须是数字");
     return false;
   }
  
  var email = document.getElementById("email");
       
  if(0==email.value.length){
     alert("email不能为空");
    return false;
  }
    
  var Regex = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/;       
    
  if (!Regex.test(email.value)){                
       alert("email格式不正确");
       return false;
  }            
   return true;
  }
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 13 :

练习-隐藏和显示

edit 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

首先通过document.getElementById 拿到div对应的节点
然后通过修改节点的style.display的值进行隐藏和显示

代码行数较多，请点击查看

<button onclick="hide()">隐藏div</button>

<button onclick="show()">显示div</button>

<br>
<br>

<div id="d">

这是一个div

</div>

<script>
function hide(){
 var d = document.getElementById("d");
 d.style.display="none";
}

function show(){
 var d = document.getElementById("d");
 d.style.display="block";
}

</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 14 :

答案-隐藏和显示

edit 顶折

纠问

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

查看本答案会花费1个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

运行效果

代码行数较多，请点击查看

<button onclick="hide()">隐藏div</button>

<button onclick="show()">显示div</button>

<br>
<br>

<div id="d">

这是一个div

</div>

<script>
function hide(){
 var d = document.getElementById("d");
 d.style.display="none";
}

function show(){
 var d = document.getElementById("d");
 d.style.display="block";
}

</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

HTML DOM系列教材（十）- 插入节点

HTML DOM系列教材（十二）- 表格排序

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2024-03-18 练习- 哈哈哈

胡乱起个名

关于前端部分-HTML DOM-常用场景的提问

1 : 练习-删除行为前的提示 2 : 练习-登陆时候，验证账号密码是否为空 3: 练习-提交数据，验证长度 4 : 练习-提交数据，验证年龄是否为数字 5: 练习-提交数据，验证年龄是否为整数 6 : 练习-提交数据，验证email格式是否正确 7 : 练习-隐藏和显示

1： 练习-删除行为前的提示

在进行删除操作前，都应该提示用户是否要删除
<style>
	table{
		width: 600px;
	}
	tr{
		text-align: center;
	}
	td{
		 width: 200px;
	}
</style>

<div id ="d1">
	<table>
		<tr>
			<td>id</td><td>英雄名称</td><td>操作</td>
		</tr>
		<tr>
			<td>1</td><td>gareen</td><td><a href="#" onclick="delTR(this)">删除</td>
		</tr>
		<tr>
			<td>2</td><td>teemo</td><td><a href="#" onclick="delTR(this)">删除</td>
		</tr>
		<tr>
			<td>3</td><td>annie</td><td><a href="#" onclick="delTR(this)">删除</td>
		</tr>
		<tr>
			<td>4</td><td>dreadbrotherr</td><td><a href="#" onclick="delTR(this)">删除</td>
		</tr>
	</table>
</div>

<script>
	var trs = document.getElementsByTagName("tr");
	for(var m = 0; m < trs.length; m++){
		if(m % 2 == 0 && m!= 0)
			trs[m].style.backgroundColor = "#F0FFFF";
		else if(m % 2 != 0)
			trs[m].style.backgroundColor = "#F0F8FF";
	}
	function delTR(link){
		var de = confirm("确认删除？");
		if(!de)
			return;
		var td = link.parentNode;
		var tr = td.parentNode;
		var table = tr.parentNode;
		table.removeChild(tr);
	}
</script>

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");
		var password = document.getElementById("password");
		if(name.value.length==0 && password.value.length!=0){
			alert("用户名不能为空");
			return false;
		}else if(name.value.length!=0 && password.value.length==0){
			alert("密码不能为空");
			return false;
		}else if(name.value.length==0 && password.value.length==0){
			alert("用户名和密码不能为空");
			return false;
		}
	return true;
    
  }
</script>

3: 练习-提交数据，验证长度
比如注册用户名的时候，用户名至少需要3位长度.

<form method="post"action="/study/register.jsp" onsubmit="return register()">
账号：<input id="name" type="text" name="name"> <br/>

<input type="submit" value="注册">
</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/>
年龄：<input id="age" type="text" name="age"> <br/>

<input type="submit" value="注册">
</form>
  
<script>
	function register(){
		var name = document.getElementById("name");
		var age = document.getElementById("age");
		if(name.value.length < 3){
			alert("用户名长度不能小于3");
			return false;
		}
		if(isNaN(age.value)){
			alert("年龄必须是数字");
			return false;
		}
	return true;
  }
</script>

5: 练习-提交数据，验证年龄是否为整数
上一个练习有个缺陷，即当年龄输入是小数的时候，也能够通过判断。
那么接下来就要求，年龄只能输入整数，小数也不行

<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号：<input id="name" type="text" name="name"> <br/>
年龄：<input id="age" type="text" name="age"> <br/>

<input type="submit" value="注册">
</form>
  
<script>
	function register(){
		var name = document.getElementById("name");
		var age = document.getElementById("age").value;
		if(name.value.length < 3){
			alert("用户名长度不能小于3");
			return false;
		}
		var tf = true;
            for (var i = 0;i < age.length;i++) {
                if (age[i] != '0' && age[i] != '1' &&age[i] != '2' && age[i] != '3' && age[i] != '4' && age[i] != '5' && age[i] != '6' && age[i] != '7' && age[i] != '8' && age[i] != '9' ) {
                    tf = false;
                    break;
                } 
            }
            if(tf == false){
				alert("年龄必须是整数");
				return false;
			}
               
		return true;
	}
</script>

6: 练习-提交数据，验证email格式是否正确
比如注册的时候，需要提交email信息，用户输入的email信息必须是电子邮箱格式的。

<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号：<input id="name" type="text" name="name"> <br/>
年龄：<input id="age" type="text" name="age"> <br/>
Email：<input id="email" type="text" name="email"> <br/>

<input type="submit" value="注册">
</form>
  
<script>
	function register(){
		var name = document.getElementById("name");
		var age = document.getElementById("age").value;
		var email = document.getElementById("email");
		if(name.value.length < 3){
			alert("用户名长度不能小于3");
			return false;
		}
		var tf = true;
            for (var i = 0;i < age.length;i++) {
                if (age[i] != '0' && age[i] != '1' &&age[i] != '2' && age[i] != '3' && age[i] != '4' && age[i] != '5' && age[i] != '6' && age[i] != '7' && age[i] != '8' && age[i] != '9' ) {
                    tf = false;
                    break;
                } 
            }
            if(tf == false){
				alert("年龄必须是整数");
				return false;
			}
        if(email.value.length == 0){
			alert("email不能为空白");
			return false;
		}   
		var Regex = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/;
		
		if(!Regex.test(email.value)){
			alert("email格式不正确");
			return false;
		}
		return true;
	}
</script>

7: 练习-隐藏和显示
首先通过document.getElementById 拿到div对应的节点
然后通过修改节点的style.display的值进行隐藏和显示
<button onclick="hide()">隐藏div</button>
<button onclick="show()">显示div</button>

<div id="div1">这是一个div</div>
<script>
	function hide(){
		var d = document.getElementById("div1");
		d.style.display = "none";
	}
	function show(){
		var d = document.getElementById("div1");
		d.style.display = "block";
	}
</script>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-12-23 我的答案

54Mozu

关于前端部分-HTML DOM-常用场景的提问

问题和答案

    <!-- 练习-提交数据，验证email格式是否正确 -->
    <!-- <form action="./jsp/login.jsp" onsubmit="return panduan()">
    <table>
        <tr>
            <td>账号: </td>
            <td><input type="text" size="20" style="margin-left: 5px;" value="" id="name"></td>
        </tr>
        <tr>
            <td>年龄: </td>
            <td><input type="text" size="20" style="margin-left: 5px;" value="" id="year"></td>
        </tr>
        <tr>
            <td>EMail: </td>
            <td><input type="text" size="20" style="margin-left: 5px;" value="" id="email"></td>
        </tr>
    </table>
    <input type="submit" value="注册">
    </form>
    <script>
        function panduan(){
            var name = document.getElementById("name");
            var year = document.getElementById("year");
            var email = document.getElementById("email");
            //判断email是否正确的代码
            var com = new Array(".","c","o","m")
            var x = email.value.split("");
            var y = 0;
            for(var i=0;i<x.length;i++){
                if(x[i]=="@"){
                    break;
                }
                if(i==x.length-1){
                    alert("后缀需为.com")
                    return false;
                }
            }
            for(var i=0;i<x.length;i++){
                if(x[i]=="."){
                    y=x.length-i;
                    break;
                }
                if(i==x.length-1){
                    alert("后缀需为.com")
                    return false;
                }
            }
            if(y!=4){
                alert("后缀需为.com")
                return false;
            }
            else{
                for(var i=0;i<com.length;i++){
                    if(x[x.length-4+i]==com[i]){
                        continue;
                    }
                    else{
                        alert("后缀需为.com")
                        return false;
                    }
                }
            }
            //判断年龄的相关代码
            if(isNaN(Number(year.value)) | year.value.length==0 ){
            alert("年龄请填写数字并且不能为空");
            return false;
            }
            else{
                if(Math.round(parseFloat(year.value))!=parseFloat(year.value) ){
                alert("年龄请填写整数");
                return false;
                }
                return true;
            }             
        }
    </script> -->
    <!-- 练习-提交数据，验证年龄是否为整数 -->
    <!-- <form action="./jsp/login.jsp" onsubmit="return panduan()">
    <table>
        <tr>
            <td>账号: </td>
            <td><input type="text" size="20" style="margin-left: 5px;" value="" id="name"></td>
        </tr>
        <tr>
            <td>年龄: </td>
            <td><input type="text" size="20" style="margin-left: 5px;" value="" id="year"></td>
        </tr>
    </table>
    <input type="submit" value="注册">
    </form>
    <script>
        function panduan(){
            var name = document.getElementById("name");
            var year = document.getElementById("year");
            if(isNaN(Number(year.value)) | year.value.length==0 ){
            alert("年龄请填写数字并且不能为空");
            return false;
            }
            else{
                if(Math.round(parseFloat(year.value))!=parseFloat(year.value) ){
                alert("年龄请填写整数");
                return false;
                }
                return true;
            }
                        
        }
    </script> -->
    <!-- 练习-提交数据，验证年龄是否为数字 -->
    <!-- <form action="./jsp/login.jsp" onsubmit="return panduan()">
    <table>
        <tr>
            <td>账号: </td>
            <td><input type="text" size="20" style="margin-left: 5px;" value="" id="name"></td>
        </tr>
        <tr>
            <td>年龄: </td>
            <td><input type="text" size="20" style="margin-left: 5px;" value="" id="year"></td>
        </tr>
    </table>
    <input type="submit" value="注册">
    </form>
    <script>
        function panduan(){
            var name = document.getElementById("name");
            var year = document.getElementById("year");
            if(isNaN(Number(year.value)) | year.value.length==0 ){
            alert("年龄请填写数字并且不能为空");
            return false;
            }
            return true;            
        }
    </script> -->
    <!-- 练习-提交数据，验证长度 -->
    <!-- <form action="./jsp/login.jsp" onsubmit="return panduan()">
    <table>
        <tr>
            <td>账户: </td>
            <td><input type="text" size="20" style="margin-left: 5px;" value="" id="name"></td>
        </tr>
    </table>
    <input type="submit" value="注册">
    </form>
    <script>
        function panduan(){
            var name = document.getElementById("name");
            if(name.value.length<3){
            alert("用户名长度至少为3位");
            return false;
            }
            return true;            
        }
    </script> -->
   <!-- 练习-登陆时候，验证账号密码是否为空 -->
    <!-- <form action="./jsp/login.jsp" onsubmit="return panduan()">
    <table>
        <tr>
            <td>账户: </td>
            <td><input type="text" size="20" style="margin-left: 5px;" value="" id="name"></td>
        </tr>
        <tr>
            <td>密码: </td>
            <td><input type="password" size="20" style="margin-left: 5px;" value="" id="password"></td>
        </tr>
    </table>
    <input type="submit" value="登录">
    </form>
    <script>
        function panduan(){
            var name = document.getElementById("name");
            var password = document.getElementById("password");
            if(name.value.length==0|password.value.length==0){
            alert("用户名或者密码为空");
            return false;
            }
            return true;            
        }
    </script> -->

    <!-- 练习-删除行为前的提示 -->
    <!-- <style>
        td{
            border: 1px black solid;
            width: 25%;
            text-align: center;
            
        }
    </style>
    <script>
        function tixing1(){
            var result = confirm("是否确认删除")
            if (result) {
                //用户点击确定按钮
                document.getElementById("t2").style.display="none"
            }
        }
        function tixing2(){
            var result = confirm("是否确认删除")
            if (result) {
                //用户点击确定按钮
                document.getElementById("t3").style.display="none"
            }
        }
        function tixing3(){
            var result = confirm("是否确认删除")
            if (result) {
                //用户点击确定按钮
                document.getElementById("t4").style.display="none"
            }
        }
    </script>
    <table id="d1" style="width: 100%;border-collapse: collapse;">
        <tr id="t1">
            <td>英雄名称</td>
            <td>操作</td>
        </tr>
        <tr id="t2">
            <td>盖伦</td>
            <td><input type="button" value="删除" onclick="tixing1()"></td>
        </tr>
        <tr id="t3">
            <td>提莫</td>
            <td><input type="button" value="删除" onclick="tixing2()"></td>
        </tr>
        <tr id="t4">
            <td>祈求者</td>
            <td><input type="button" value="删除" onclick="tixing3()"></td>
        </tr>
    </table> -->

1 个答案

CharlieLong
答案时间：2023-11-08

所有问题的答案

代码超过 5行，点击查看

<!--练习1：删除行为前的提示-->
<!--练习2：登录时验证账号密码是否为空-->
<!--练习3：提交数据验证长度-->
<!--练习4：验证年龄是否为数字-->
<!--练习5：验证年龄是否为整数-->
<!--练习6：验证email格式是否正确-->
<!--练习7：隐藏和显示-->
<!--练习8：表格排序-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>DOM常见常见场景</title>
</head>
<body id="body">
<!--练习1：删除行为前的提示-->
<h3>练习1：删除行为前的提示</h3>
<table id="Heroes" ></table>
<!--练习2：登录时验证账号密码是否为空-->
<h3>练习2：登录时验证账号密码是否为空</h3>
<form method="post" action="calculate.html" onsubmit="return login()">
    <div>
        账号：<input type="text" id="user">
    </div>
    <div>
        密码：<input type="text" id="passwd">
    </div>
    <div>
        <button type="submit">登录</button>
    </div>
</form>
<!--练习3：提交数据验证长度-->
<h3>练习3：提交数据验证长度</h3>
<form method="post" action="calculate.html" onsubmit="return login()">
    <div>
        账号：<input type="text" id="user1">
    </div>
    <div>
        密码：<input type="text" id="passwd1">
    </div>
    <div>
        <button type="submit">登录</button>
    </div>
</form>
<!--练习4：验证年龄是否为数字-->
<!--练习5：验证年龄是否为整数-->
<!--练习6：验证email格式是否正确-->
<h3>练习4：验证年龄是否为数字</h3>
<h3>练习5：验证年龄是否为整数</h3>
<h3>练习6：验证email格式是否正确</h3>
<div>
    账号：<input type="text" id="user3">
</div>
<div>
    年龄：<input type="text" id="inputCheck" onkeyup="checkisInt()"><span id="returnisInt"></span>
</div>
<div>
    E-mail：<input type="text" id="inputCheck_email" onkeyup="checkisEmail()"><span id="returnisEmail"></span>
</div>
<div>
    <button onclick="checkisPass()">注册</button>
</div>

<!--练习7：隐藏和显示-->
<h3>练习7：隐藏和显示</h3>
<button onclick="showDiv()">显示DIV</button>
<button onclick="hideDiv()">隐藏DIV</button>
<div id="divtest">这是一个DIV</div>
<!--练习8：表格排序-->
<h3>练习8：表格排序</h3>
<script>
    // <!--练习1：删除行为前的提示-->
    //初始化列和内容信息
    let heroesArrayCol=["id","名称","血量","伤害"];
    let heroesArrayVal=[[1,"garren","340","58"],
        [2,"teemo","320","76"],
        [3,"annie","380","38"],
        [4,"deadbrother","400","90"]];
    let tbHeroes=document.getElementById("Heroes");
    //表格首行信息
    let tbrowFirst=document.createElement("tr");
    tbrowFirst.id="firstRow";
    for(let i=0;i<heroesArrayCol.length;i++){
        let td=document.createElement("td");
        let tdText=document.createTextNode(heroesArrayCol[i]);
        td.appendChild(tdText);
        td.setAttribute("width","20%");
        tbrowFirst.appendChild(td);
    }
    //加入操作列
    let td=document.createElement("td");
    td.appendChild(document.createTextNode("操作"));
    td.setAttribute("width","20%");
    tbrowFirst.appendChild(td);

    tbHeroes.appendChild(tbrowFirst);
    //表格中添加数据行信息
    let tbrowVal=new Array(heroesArrayVal.length);
    for(let i=0;i<heroesArrayVal.length;i++){
        tbrowVal[i]=document.createElement("tr");
        tbrowVal[i].id=i;
        tbHeroes.appendChild(tbrowVal[i]);
        for(let j=0;j<heroesArrayVal[i].length;j++){
            let td=document.createElement("td");
            let tdText=document.createTextNode(heroesArrayVal[i][j]);
            td.appendChild(tdText);
            tbrowVal[i].appendChild(td);
        }
        //加入操作列按钮
        let td=document.createElement("td");
        let a=document.createElement("a");
        let aText=document.createTextNode("删除");
        a.href="#";
        a.appendChild(aText);
        a.setAttribute("onclick","delRow(this)")
        td.appendChild(a);
        tbrowVal[i].appendChild(td);
        if(i%2===0){
            tbrowVal[i].className="oddRow"
        }else{
            tbrowVal[i].className="evenRow"
        }
    }
    //调整样式
    tbHeroes.style.width="60%";
    tbHeroes.style.borderCollapse="collapse"
    let firstRow=document.getElementById("firstRow");
    let oddRow=document.getElementsByClassName("oddRow");
    let evenRow=document.getElementsByClassName("evenRow");
    firstRow.style.backgroundColor="write";
    firstRow.style.borderBottomColor="4E4E4E";
    firstRow.style.borderBottomStyle="double";

    for(let i=0;i<oddRow.length;i++){
        oddRow[i].style.backgroundColor="rgb(248,248,248)";
        oddRow[i].style.borderBottomColor="#C0BEBE";
        oddRow[i].style.borderBottomStyle="solid";
    }
    for(let i=0;i<evenRow.length;i++){
        evenRow[i].style.backgroundColor="rgb(255,255,255)";
        evenRow[i].style.borderBottomColor="#C0BEBE";
        evenRow[i].style.borderBottomStyle="solid";
    }
    //执行删除操作
    function delRow(toBeDel){
        let trNum=toBeDel.parentNode.parentNode;
        let table=document.getElementById("Heroes")
        table.removeChild(trNum);
    }
    // <!--练习2：登录时验证账号密码是否为空-->
    function login(){
        let user=document.getElementById("user").value;
        let passwd=document.getElementById("passwd").value;
        if(user===""||passwd===""){
            alert("用户名或密码不能为空")
            return false
        }else if(user.length<3){
            alert("用户名长度不能小于3位")
            return false
        }
        return true
    }
    //<!--练习4：验证年龄是否为数字-->
    let isPassCheck=false;
    function checkisInt(){
        let input=Number(document.getElementById("inputCheck").value);
        let returnisInt=document.getElementById("returnisInt")
        if(Number.isInteger(input)&&input!==0){
            returnisInt.textContent="";
            isPassCheck=true;
        }else if(!Number.isInteger(input)){
            returnisInt.textContent="请录入整数!";
            isPassCheck=false;
        }else if(input===0){
            returnisInt.textContent="请输入正确的年龄";
            isPassCheck=false;
        }
    }
    function checkisPass(){
        if(isPassCheck===false){
            alert("校验不通过，请修改后再提交！");
        }else{
            alert("注册成功！");
        }
    }
    function checkisEmail(){
        let input=document.getElementById("inputCheck_email").value;
        let returnisEmail=document.getElementById("returnisEmail")
        var Regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if(Regex.test(input)){
            returnisEmail.textContent="";
            isPassCheck=true;
        }else if(!Regex.test(input)){
            returnisEmail.textContent="邮箱格式不正确!";
            isPassCheck=false;
        }else if(input===""){
            returnisEmail.textContent="邮箱不能为空";
            isPassCheck=false;
        }
    }

    <!--练习7：隐藏和显示-->
    function showDiv(){
        let div=document.getElementById("divtest");
        div.style.display="block";
    }
    function hideDiv(){
        let div=document.getElementById("divtest");
        div.style.display="none";
    }

</script>
</body>

</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-05-23 实例1 onclick在script中添加

quan25617600

关于前端部分-HTML DOM-常用场景的提问

在script中添加onclick的相关方法

<body>
    <table id="table"><tr>
            <th>英雄</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>马大师</td>
            <!-- 只有给href加上相关属性值，才可获取添加的其他属性值如index -->
            <td><a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td>伍德</td>
            <td><a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td>集美</td>
            <td><a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td>八爷</td>
            <td><a href="javascript:;">删除</a></td>
        </tr>
    </table>

    <script>
        // 先获取每一个a标签
        var a = document.getElementsByTagName("a");
        //将每一个a标签添加一个index属性，并为其赋值
        for(var i=0;i<a.length;i++){
            // 创建属性
            var index = document.createAttribute("index");
            //为属性赋值
            index.nodeValue = i;
            //将属性赋给相应标签
            a[i].setAttributeNode(index);
            console.log(a[i].getAttribute("index"));
        }
        // 
        for(var  i=0;i<a.length;i++){
            //将每个a标签添加点击对应点击功能，需要在function里调用其他函数
            a[i].onclick=function(){
                console.log(this.getAttribute("index"));
                //可在调用其他函数时使用this，该参数是a的index标签对应的数值
                delteCheck(this.getAttribute("index"));
            }
        }
        //重新设置index的数值
        function setIndex(){
            var a = document.getElementsByTagName("a");
            for(var i=0;i<a.length;i++){
                a[i].attributes["index"].nodeValue = i;
                console.log(a[i]);
        }
        }

        function delteCheck(num){
            var boolean = confirm("确认删除该数据");
            if(boolean){
                var tr = document.getElementsByTagName("tr");
                var table = document.getElementById("table");
                num++;
                console.log(num);
                console.log(tr[num])
                //table的子元素是tbody，所以需要使用第一个子元素进行删除，且tr与table间不能有空格
                table.firstChild.removeChild(tr[num]);
                //删除完一个元素后，从新设置a的index数值
                setIndex();
            }
        }
    </script>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-04-22 实例1解析

2021-03-30 示例13答案

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 52 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-HTML DOM-常用场景的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图