看程序学js-6 DOM常用场景

最新推荐文章于 2019-09-08 16:14:49 发布
最新推荐文章于 2019-09-08 16:14:49 发布
阅读量140 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tujiahao1/article/details/92838066
版权

1、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>
</body>
</html>

2、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>
</body>
</html>

3、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>
</body>
</html>

4、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>
</body>
</html>

5、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>
</body>
</html>

6、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>
</body>
</html>

7、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>
</body>
</html>

8、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>
</body>
</html>

9

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
  table{
    border-collapse:collapse;
    width:90%;
  }
  tr.odd{
    background-color:#f8f8f8;
  }
  tr{
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: lightgray;
    height:35px;
  }

  td{
    width:25%;
    text-align:center;
  }

</style>
<div id ="d">

</div>

<script>
  function createTD(text){
    var td=document.createElement("td");
    var text= document.createTextNode(text);
    td.appendChild(text);
    return td;
  }

  function createTR(texts){
    var tr=document.createElement("tr");
    for(var i=0;i<texts.length;i++){
      var td = createTD(texts[i]);
      tr.appendChild(td);
    }
    return tr;
  }
  function createTable(rows){
    var table=document.createElement("table");
    for(var i=0;i<rows.length;i++){
      var tr= createTR(rows[i]);
      table.appendChild(tr);
    }
    return table;
  }
  var row0= new Array("id","名称","血量","伤害");
  var row1= new Array("1","gareen","340","58");
  var row2= new Array("2","teemo","320","76");
  var row3= new Array("3","annie","380","38");
  var row4= new Array("4","deadbrother","400","90");
  var rows=new Array(row0,row1,row2,row3,row4);

  var div = document.getElementById("d");
  var table=createTable(rows);
  div.appendChild(table);

</script>
</body>
</html>
涂家豪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js_HTML_Dom操作练习
10-15
js_HTML_Dom操作练习，比较基础的
父节点parentNode
weixin_30384217的博客
07-02 980
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body> <ul id...
DOM练习小记--一个简单的Web页面游戏
baiweicheng7178的博客
05-28 177
资料源自《Head first Ajax》 第六章（小时候我也有这么一个游戏板，图片是米奇……） 这是一个基于DOM的二维拼图游戏，HTML和CSS文档是原书的文档，我只是在initial版本中（没有js文件）添加了自己的js文件。 游戏规则是点击空白格上、下、左、右四个方向相邻的图片，会把该图片移动到空白格中，然后继续，直到把所有图片的位置按顺序排列，最后一个为空格，就算赢了。 文档结...
JS对DOM操作应用场景【显示全部DOM边框、自适应页面、过滤XSS、存取LocalStorage】
weixin_43837268的博客
09-08 373
显示全部DOM边框 调试页面元素边界时使用 [].forEach.call($$("*"), dom => { dom.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16); }); 自适应页面 页面基于一张设计图但需做多款机型自适应，元素尺寸使用rem进...
JS中常见原生DOM操作API【总结整理)
热门推荐
程序猿开发日志【学习永无止境】
11-29 2万+
几种对象 Node Node是一个接口，中文叫节点，很多类型的DOM元素都是继承于它，都共享着相同的基本属性和方法。常见的Node有 element，text，attribute，comment，document 等（所以要注意 节点 和 元素 的区别，元素属于节点的一种）。 Node有一个属性 nodeType 表示Node的类型，它是一个整数，其数值分别表示相应的Node类型
Elementos-DOM-JS
02-20
“Código基本参数化交互演示要素DOM实用程序Javascript”这部分可能意味着项目包含了一些基础的、可参数化的代码示例，用于演示如何实现动态的DOM交互。这可能包括动态添加元素、响应用户点击事件、根据条件改变...
js-高性能JavaScript-JavaScript语言精粹修订版
07-10
#### 六、《JavaScript DOM高级程序设计》 **知识点概述：** 1. **DOM深入解析：** - 深入理解DOM的核心概念和技术细节。 - 探讨DOM的最新进展和发展趋势。 2. **DOM选择器与查询技术：** - 学习如何使用...
教学进度表-Javascript程序设计.docx
12-16
JavaScript 程序设计的所有方面，从 JavaScript 的起源到 JavaScript 的高级应用，涵盖了 JavaScript 的基础知识、JavaScript 的实现、JavaScript 小体验、JavaScript 环境搭建、JavaScript 类型、JavaScript 变量和...
js-utils:Jitsi JS项目的实用程序
05-06
**js-utils: Jitsi JS项目的实用程序** `js-utils` 是一个专为Jitsi项目设计的JavaScript工具库，它包含了一系列针对Jitsi JavaScript项目开发的实用函数和模块。这个库的目标是提高开发效率，提供通用的功能，并...
node-js-exercises:边学边用NodeJS编写的基本程序
06-10
Node.js 与前端JavaScript的关系也是学习的重点，虽然语法相同，但运行环境和使用场景不同，理解它们之间的差异对于全栈开发至关重要。例如，Node.js 中没有浏览器提供的DOM API，而是使用自己的模块系统和API。 总...
顶尖电子称条码秤LS系列称固件，最新固件，固件
08-28
顶尖电子称条码秤LS系列称固件，最新固件，固件
爬取淘宝热销(热门)咖啡商品信息数据集
08-28
本资源旨在收集淘宝平台上热销咖啡商品的相关信息，包括但不限于：店铺所在省份、城市位置、商品名称、销售价格、销量数据、单价（以人民币计）、付款人数、是否提供包邮服务、是否来自天猫平台以及满减优惠的详细信息。这些信息均来源于淘宝平台的公开透明数据，可供学习参考之用。请注意，本资源仅用于学术研究和个人学习目的，不得用于商业用途或其他非法活动。
爬取的淘宝新品推荐男装商品信息公开透明数据集
08-28
本资源专注于收集淘宝平台最新推荐的男装商品信息，内容涵盖商品的店铺所在省份、城市位置、商品的名称、销售价格、累积销量、单价（以人民币计价）、付款的顾客人数、是否提供包邮服务、是否为天猫平台的商品，以及相关的满减优惠情况。这些详细的数据点均来源于淘宝平台的公开透明信息，经过精确抓取和整理，旨在为分析电商平台上的新品推荐策略和消费者购买行为提供实用数据。 这些数据严格遵循淘宝平台的公开政策和隐私保护原则获取，确保了信息的合法性与合规性。然而，本资源仅作为学习参考之用，意在帮助研究人员、市场分析师或学生等理解电商领域的商品推荐机制、销售动态及市场趋势。 任何将此数据用于商业目的或其他未授权的活动都是不恰当的，甚至可能触犯相关法律条款。 在使用这些数据进行学术研究或个人学习时，用户应自觉遵守相关法律法规，尊重数据来源和版权，正确引用数据源，并不得用于任何形式的商业盈利。
STM32F4的环境配置，可直接运行STM32F4系列的芯片
08-28
STM32F4的环境配置，可直接运行STM32F4系列的芯片
技术资料PCB资料模拟电子技术资料03j.zip
08-28
技术资料PCB资料模拟电子技术资料03j.zip
全国大学生电子设计大赛项目合集射频无线资料雷达接收机灵敏度自动测试方案设计
08-28
全国大学生电子设计大赛项目合集射频无线资料雷达接收机灵敏度自动测试方案设计提取方式是百度网盘分享地址
da_1724814826825 (1)
08-28
da_1724814826825 (1)
单片机实现的超声波测距与显示模块.md
08-28
如何利用单片机实现超声波测距与显示模块，包括从硬件设计到软件编程的全方位内容。首先，介绍了超声波测距的基本原理，使用超声波模块（如HC-SR04）通过发射和接收超声波信号来测量距离，并通过公式计算距离。接着，阐述了单片机（如STC89C52、ATmega328）如何与超声波模块连接，以及电路设计细节。软件部分涵盖了如何编写单片机程序以触发超声波发射、测量回波时间，并计算距离。代码示例展示了如何使用计时器测量回波时间，并通过LCD显示距离。最后，文章还包括了调试与优化建议，如硬件连接检查、软件调试方法及性能优化策略，以确保系统的准确性和稳定性。
计算机软件著作权程序鉴别材料（源代码）提取器_extractor.zip
最新发布
08-28
计算机软件著作权程序鉴别材料（源代码）提取器_extractor
C编程学习资源大全
6. **前端技术**：HTML、CSS布局、JavaScript DOM操作、AJAX异步通信等，以及现代前端框架和库的理解。 7. **服务器端技术**：PHP的Web开发，以及PHP与其他技术的集成。 8. **软件工程**：UML建模语言用于需求分析、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值