web前端:使用JavaScript完成表格隔行换色

    作者:朱李洛克更新于: 2020-05-13 13:20:26

    Web开发

      Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言,如今越来越广泛地使用于Internet网页制作上。Javascript是由Netscape公司开发的一种脚本语言(scriptinglanguage),或者称为描述语言。在HTML基础上,使用Javascript可以开发交互式web网页。

      使用JavaScript完成表格隔行换色

      表格隔行换色

      需求分析

      ​我们商品分类的信息太多,如果每一行都显示同一个颜色的话会让人看的眼花,为了提高用户体验,减少用户看错的情况,需要对表格进行隔行换色

      技术分析

      table对象

      集合

      cells[]:返回包含表格中所有单元格的一个数组。

      rows[]:返回包含表格中所有行的一个数组。

      tBodies[]:返回包含表格中所有tbody的一个数组。

      步骤分析

      确定事件:文档加载完成onload

      2.事件要触发函数:init()

      3.函数:操作页面的元素

      要操作表格中每一行

      动态的修改行的背景颜色

      代码实现

      

      

      

      

      Title

      

      

      

      

      

      

      

      

      分类ID

      分类名称

      分类商品

      分类描述

      操作

      

      

      

      

      

      1

      手机数码

      华为,小米,尼康

      黑马数码产品质量最好

      

      修改|删除

      

      

      

      

      

      

      2

      成人用品

      充气的

      这里面的充气电动硅胶的

      修改|删除

      

      

      

      

      

      3

      电脑办公

      联想,小米

      笔记本特卖

      修改|删除

      

      

      

      

      

      4

      馋嘴零食

      辣条,麻花,黄瓜

      年货

      修改|删除

      

      

      

      

      

      5

      床上用品

      床单,被套,四件套

      都是套子

      修改|删除

      

      

      

      

      运行用Javascript编写的程序需要能支持Javascript语言的浏览器。Netscape公司Navigator3.0以上版本的浏览器都能支持Javascript程序,微软公司InternetExplorer3.0以上版本的浏览器基本上支持Javascript。

课课家教育

未登录