使用JS完成表格的隔行换色

  • 新标签的学习

  <thead>

    <tr>

      <th></th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td></td>

    </tr>

  </tbody>

  • 确定事件(页面加载事件onload)

  • 获取元素: 获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)

    • Tbody里面的行数(rows.length)

    • JS的遍历(for 循环)

    • 获取奇数行和偶数行(对遍历中角标对2取余)

    • 设置背景颜色(.style.backgroundColor)

  • 步骤分析

第一步: 确定事件(onload)，并为其绑定一个函数

第二步: 书写函数(获取表格)

第三步: 获取tbody里面的行数

第四步: 对tbody里面的行数进行遍历

第五步: 获取奇偶行和偶数行(角标对2取余)

第六步: 分别对奇数行和偶数行设置背景颜色

  • 代码实现

   <script>

      //无名函数

      window.onload = function() {

        //1.获取表格

        var tbEle = document.getElementById("tbl");

        //2.获取表格中tbody里面的行数(长度)

        var len = tbEle.tBodies[0].rows.length;

        // alert(len);

        //3.对tbody里面的行进行遍历

        for(var i = 0; i < len; i++) {

          if (i % 2 == 0) {

            //4.对偶数行设置背景颜色

            tbEle.tBodies[0].rows[i].style.backgroundColor = "pink";

          } else {

            //5.对奇数行设置背景颜色

            tbEle.tBodies[0].rows[i].style.backgroundColor = "yellow";

          }

        }

      }

   </script>

实现一个表格的高亮显示

分析：

第一步: 确定事件(onmouseover 和 onmouseout)并分别为其绑定一个函数

第二步: 获取鼠标移上去的那行，对其设置背景颜色

第三步：移出鼠标，对其设置背景颜色

<script>

      function changeColor(id, flag) {

        if (flag == 'over') {

          document.getElementById(id).style.backgroundColor="red";

        } else if (flag == 'out') {

          document.getElementById(id).style.backgroundColor="white";

        }

      }

  </script>

  ​

  <body>

      <table border="1" width="500" height="50" align="center" id="trl">

        <thead>

          <tr>

            <th>编号</th>

            <th>姓名</th>

            <th>年龄</th>

          </tr>

        </thead>

        <tbody>

          <tr onmouseover="changeColor('tr1', 'over')" id="tr1" onmouseout="changeColor('tr1', 'out')">

            <td>1</td>

            <td>张三</td>

            <td>22</td>

          </tr >

        </tbody>

      </table>

  </body>

  • 总结

之前使用过的事件(onsubmit/onclick/onload/ onfocus/onblur /onmouseover/onmouseout)

onfocus/onblur :

聚焦离焦事件，用于表单校验的时候比较合适

Onclick/ondblclick:

鼠标单击和双击事件

onkeydown/onkeypress:

搜索引擎使用较多

onload: 页面加载,就访问的代码，其他所有的操作(匿名方式)都可以放到这个绑定的函数里

onmouserover/onmouseout/onmousemove: 购物网站商品详情页

onsubmit: : 单提交事件

onchange: 当用户改变内容的时候使用这个事件(二级联动)

  • 技术分析

确定事件(鼠标单击事件 onclick), 事件绑定到前面的复选框

获取编号前面的复选框的专题(是否选中)

​ 获取复选框: var checkAllEle = document.getElementById("id")​ 获取复选框的状态: checkAllEle.checked?

获取下面所有的复选框:

document.getElementByName("name")

  • 步骤分析

第一步: 确定事件(onclick)并为其绑定一个函数

第二步: 书写函数(获取编号前面的复选框, 获取其状态)

第三步: 判断编号前面复选框的状态(如果为选中, 获取下面所有的复选框, 并将其状态置为选中)

第四步: 判断编号前面的复选框的状态(如果未选中, 获取下面所有的复选框, 并将其状态置为未选中)

<script>

      function checkAll() {

          //1.获取编号前面的复选框

          var checkAllEle = document.getElementById("checkAll");

          //2.对编号前面的复选框的状态进行判断

          if (checkAllEle.checked == true) {

              //3.后去下面所有的复选框

              var checkOnes = document.getElementsByName("checkOne");

              for (var i = 0; i < checkOnes.length; i++) {

                  //5.拿到每一个复选框,并将其状态置为选中

                  checkOnes[i].checked = true;

              }

          } else {

              //6.获取下面所有的复选框

              var checkOnes = document.getElementsByName("checkOne");

              //7.对获取的所有复选框进行遍历

              for (var i = 0; i < checkOnes.length; i++) {

                  //8.拿到每一个复选框,并将其状态置为未选中

                  checkOnes[i].checked = false;

              }

          }

      }

  </script>

  <html>

      <head>

            <title></title>

            <style></style>

            <link/>

      </head>

      <body>

            <span></span>

            <div>

                <img src='' />

            </div>

            <p></p>

      </body>

  </html>

Document对象

Document: 整个html文件都成为一个document文档

Element: 所有的标签都是Element元素

Attribute: 标签里面的属性

Text: 标签中间夹着的内容为 text文本

Node: document，element、attribute、text统称为结点node

(getElementsByName(), getElementsByTagName() ) 后面两个方法获取之后需要遍历!

Element 对象

我们所认知的HTML页面中所有的标签都是element元素

element.appendChild() 向元素添加新的子节点，作为最后一个子节点

element.firstChild() 返回元素的首个子节点

element.getAttribute() 获得指定属性值

element.innerHTML 设置或返回元素的内容

element.insetBefore() 在指定的已有的子节点之前插入新节点.

element.setAtrribute()

Attribute对象

我们所认知的html页面中所有标签里面的属性都是attribute

attr.value 设置或返回属性的值

DOM练习

  在页面中使用列表显示一些城市
  <ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
  </ul>
  我们希望点击一个按钮实现动态添加城市
  ​
  分析:
      事件(onclick)
      获取ul元素节点
      创建一个城市的文本节点
      创建一个li元素节点
      使用element里面的方法appendChild()来添加子节点

代码

  <!DOCTYPE html>

  <html>

      <head>

          <meta charset="UTF-8">

          <title>动态添加城市</title>

          <script>

              window.onload = function() {

                  document.getElementById("btn").onclick = function() {

                      //1.获取ul元素节点

                      var ulEle = document.getElementById("ul1");

                      //2.创建城市文本结点

                      var textNode = document.createTextNode("深圳");  //深圳

                      //3.创建li元素节点

                      var liEle = document.createElement("li");  // <li></li>

                      //4.将城市文本结点添加到li元素中去

                      liEle.appendChild(textNode);

                      //5.讲li添加到ui中去

                      ulEle.appendChild(liEle);

                  }

              }

          </script>

      </head>

      <body>

          <input type="button" value="添加新城市" id="btn" />

          <ul id="ul1">

              <li>北京</li>

              <li>上海</li>

              <li>广州</li>

          </ul>

      </body>

  </html>

用JS完成省市二级联动

  1. 需求分析

    希望在注册页面中添加一个字段(籍贯), 当用户选择一个具体的省份，在后面的下拉列表中动态加载该省份下所有的城市,显示效果如下

  2. 技术分析:

    事件(onchange)

    使用一个二维数组来存储省份和城市(二维数组的创建?)

    获取用户选择的省份(使用方法传参的方式: this.value)

    遍历数组 (获取省份与用户选择的省份比较, 如果相同了, 继续遍历该省份下所有的城市)

    创建文本结点和元素结点，并进行添加操作

    createTextNode / createElement appendChild()

  3. 步骤分析

    第一步: 确定事件(onchange)并为其绑定一个函数

    第二步: 创建一个二维数组用于存储省份和城市

    第三步: 获取用户选择的省份

    第四步: 遍历二维数组中的省份

    第五步: 将遍历的与用户选择的省份比较

    第六步: 如果相同，遍历该省份下的所有城市

    第七步: 创建城市文本结点

    第八步: 创建option元素结点

    第九步: 将城市文本结点添加到option元素结点中去

    第十步: 获取第二个下拉列表，讲option元素结点添加进去

    第十一步: 每次操作前清空下拉列表的option内容

代码:

  <script>

  ​

      //1.创建一个二维数组用于存储省份和城市

      var cities = new Array(4);

      for (var i = 0; i < cities.length; i++) {

        cities[i] = new Array("武汉市" + i, "黄冈市" + i, "荆州市" + i);

      }

      function changeCity(val) {

  ​

        //7.获取第二个下拉列表

        var cityEle = document.getElementById("city");

  ​

        //9.清空第二个下拉列表的option内容

        cityEle.options.length = 0;

  ​

        //2.遍历二维数组中的省份

        for (var i = 0; i < cities.length; i++) {

          if (val == i) {

            //3.遍历用户选择省份下的城市

            for (var j = 0; j < cities[i].length; j++) {

              //4.创建城市的文本操作

              var textNode = document.createTextNode(cities[i][j]);

              //5.创建option元素结点

              var opEle = document.createElement("option");

              //6.将城市的文本结点添加到option元素结点

              opEle.appendChild(textNode);

              //8.将option元素结点添加到第二个下拉列表中去

              cityEle.appendChild(opEle);

            }

          }

        }

      }

  </script>

  ​

  <tr>

      <td>籍贯</td>

      <td>

        <!--2.确定事件，通过函数传参的方式拿到改变后的城市-->

        <select onchange="changeCity(this.value)">

          <option>--请选择--</option>

          <option value="0">湖北</option>

          <option value="1">湖南</option>

          <option value="2">河南</option>

          <option value="3">河北</option>

        </select>

        <select id="city">

  ​

        </select>

      </td>

  </tr>

JS的内置对象

  • JS Array

  • JS Boolean

  • JS Date

  • JS Math

  • JS Number

  • JS String

  • JS RegExp

JavaScrip入门笔记（二）的更多相关文章

  1. Shader 入门笔记(二) CPU和GPU之间的通信,渲染流水线

    渲染流水线 1)应用阶段(CPU处理) 首先,准备好场景数据(摄像机位置,视锥体,模型和光源等) 接着,做粗粒度剔除工作. 最后,设置好每个模型的渲染状态(使用的材质,纹理,shader等) 这一阶段 ...

  2. onethink入门笔记(二)

    5.onethink页面端获得后台服务器传值的方法 1:一般后台通过assign的值前台通过{$value}显示出来; 2:如果需要在js中使用 则可以通过 在js中写 var m = "{ ...

  3. OpenGLES入门笔记二

    #import <UIKit/UIKit.h> #import <QuartzCore/QuartzCore.h> #import <OpenGLES/ES2/gl.h& ...

  4. Redis入门笔记(二)-配置及运行

    转自: http://gly199.iteye.com/blog/1056424 1.redis基本参数 redis的配置文件中的常见参数如下: daemonize   是否以后台进程运行,默认为no ...

  5. nodeJs入门笔记(二)

    js中window通常是全局变量 global 是node.js里的全局变量 node中能访问的对象一般都是 global的 属性 global 对象属性 process 用于描述当前Node 进程状 ...

  6. Scala入门笔记二

    [TOC] 标识符 可用的字符 处理括号类字符,分隔符之外,其他所有的可打印的ASCII字符,如字母,数字,下划线和美元符号($)均可出现在Scala标识符中 插入符包括了(,) [,] {,and} ...

  7. Shader 入门笔记(二) CPU和GPU之间的通信

    渲染流水线的起点是CPU,即应用阶段. 1)把数据加载到显存中 2)设置渲染状态,通俗说这些状态定义了场景中的网格是怎样被渲染的. 3)调用DrawCall,一个命令,CPU通知GPU.(这个命令仅仅 ...

  8. SpringBoot入门笔记(二)、使用fastjson

    1.添加fastjson配置 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastj ...

  9. JS高度融合入门笔记(二)

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS ...

随机推荐

  1. 20172305 2018-2019-1 《Java软件结构与数据结构》第六周学习总结

    20172305 2018-2019-1 <Java软件结构与数据结构>第六周学习总结 教材学习内容总结 本周内容主要为书第十章内容: 树(一种非线性结构,其中的元素被组织成一个层次结构) ...

  2. 团队计划会议（二）——WBS

    一.会议及WBS 因为是第一次开发android应用,所以我们对这次开发心里也没底,最后我们商量暂时先实现主要的几个骨架功能,之后再慢慢完善. 会议期间,我们根据自己的能力大致先估算了完成这些功能需要 ...

  3. 第5题 查找字符串中的最长回文字符串---Manacher算法

    转载:https://www.felix021.com/blog/read.php?2040 首先用一个非常巧妙的方式,将所有可能的奇数/偶数长度的回文子串都转换成了奇数长度:在每个字符的两边都插入一 ...

  4. DB2 日志

    跟Oracle类似DB2也分为两个模式,日志循环vs归档日志,也就是非归档和归档模式,下面对这两种模式做简单的介绍. 日志循环 日志循环是默认方式,也就是非归档模式,这种模式只支持backup off ...

  5. CentOS7安装Consul集群

    1.准备4台服务器 linux1 192.168.56.101 linux2 192.168.56.102 linux3 192.168.56.103 linux4 192.168.56.104 2. ...

  6. erlang node time ticket

    Erlang doesn't detect net splits by itself. You could start looking atnet_kernel:set_net_ticktime/2 ...

  7. 注解实现IOC和DI

    1.组件扫描 Spring3.0后为我们引入了组件自动扫描机制,它可以在类路径底下寻找标注了@Component.@Service.@Controller.@Repository注解的类,并把这些类纳 ...

  8. 【第三周】每周psp

    代码累计 300+575+475=1250 随笔字数 1700+3000+3785=8485 知识点 Cppunit框架 Ui设计 Scrum站立会议 燃尽图(好像没燃起来) 博客写作技能 本周主要是 ...

  9. sublime插件时间

    import datetime import sublime_plugin class AddCurrentTimeCommand(sublime_plugin.TextCommand): def r ...

  10. ETL技术( Extract-Transform-Load) 数据仓库技术-比如kettle

    每次面试,互联网的面试官,经常问我有没有用过ETL,每次我都懵逼,说没用过,觉得是多么高大上的东东,数据仓储 今天查了一下,我晕,自己天天用的Kettle就是最典型的ETL, 可以实现不同数据库之间的 ...