-
Javascript知识【案例：表格隔行换色】
目录
1，案例1：表格隔行换色
要达到以上效果，仅需要将第二行，第四行tr标签获取到，更改其样式属性即可
分析：
关键点：
- 获取到指定的tr (遍历时跳过0索引，让偶数索引的元素进行变色)
document.getElementsByTagName("tr");
2.修改tr对象 className
元素对象.className="blue";
步骤：
- 页面加载完成时，编写要进行的操作
- 隔行换色操作
//1、获取所有的tr
//2、遍历tr数组，跳过0索引，只需要偶数索引，让偶数索引改变className
代码实现：
<script>
//一、页面加载完成时，编写要进行的操作
window.onload = function (ev) {
//二、隔行换色操作
//1、获取所有的tr
var trArr = document.getElementsByTagName("tr");
//2、遍历tr数组，跳过0索引，只需要偶数索引，让偶数索引改变className
for (var i = 1; i <trArr.length ; i++) {
if(i%2==0){
trArr[i].className= "blue";
}
}
}
script>1，获取到指定的tr（遍历时跳过0索引，让偶数索引的元素进行变色）
document.getElementsByTagName("tr")
2，修改tr对象className 元素对象.className="blue"
2，案例2：鼠标移入粉色，移出原色【基础+】
2.1：需求说明
分析：
关键点：
- 鼠标移入、移出事件
onmouseover
onmouseout
- 自定义数据保存
2.2：前置知识：鼠标移入移出事件
目标：掌握鼠标移入、移出事件基本绑定方式
掌握事件DOM绑定方式
路径：
- 鼠标移入、移出事件
- DOM方式绑定事件
讲解：
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
/*
onmouseover 移入
onmouseout 移出
*/
function run1() {
var d1 = document.getElementById("d1");
d1.style = "width:100px;height: 100px;background-color: blue;";
}
function run2() {
var d1 = document.getElementById("d1");
d1.style = "width:100px;height: 100px;background-color: pink;";
}
script>
head>
<body>
<div id="d1" style="width:100px;height: 100px;background-color: pink;" onmouseover="run1()" onmouseout="run2()">div>
body>
html>小结：
onmouseover：鼠标移入再触发事件
onmouseout:鼠标移出再触发事件
DOM绑定方式：
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
//需求：在页面加载完成时，为d1元素绑定鼠标移入移出事件
window.onload = function (ev) {
var d1 = document.getElementById("d1");
/*d1.onmouseover = function (ev1) {
run1();
};*/
d1.onmouseover = run1;
d1.onmouseout = run2;
}
function run1() {
var d1 = document.getElementById("d1");
d1.style = "width:100px;height: 100px;background-color: blue;";
}
function run2() {
var d1 = document.getElementById("d1");
d1.style = "width:100px;height: 100px;background-color: pink;";
}
script>
head>
<body>
<div id="d1" style="width:100px;height: 100px;background-color: pink;">div>
body>
html>小结：
DOM绑定方式，不修改HTML前提下，对HTML元素进行页面加载完成时，进行事件绑定。
绑定格式：
- 元素.事件 = function(){};
- 元素.事件 = 方法名;
2.3：前置拓展知识：this关键字
目标：1、掌握this关键字用法
2、掌握this关键字存储自定义数据
路径：
- this关键字常见使用
- this关键字在事件中的应用
- this关键字如何存储自定义数据
讲解：
this关键字常见使用
this当前对象。
this关键字在事件中的应用：
this关键字如何存储自定义数据
对象["key"]="value";
this["key"]="value";
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
window.onload = function (ev) {
var t1 = document.getElementById("t1");
t1["username"] = "金雪";
t1.onclick = function (ev1) {
alert(this["username"]);
};
}
script>
head>
<body>
<input type="text" value="xxxx" id="t1"/>
body>
html>小结：
写在HTML属性中，可以在DOM绑定的事件中。
this["key"]="value";
2.4：分析&实现
- 步骤：
1、页面加载完成时，获取所有的tr
2、遍历所有tr，除了0索引。
3、遍历中：索引奇数保存white样式，索引偶数保存blue样式
4、遍历中：每遍历一个tr，绑定鼠标移入和移出事件
5、鼠标移入事件：先保存之前的class值，再赋予新的class值：pink
6、鼠标移出事件：获取原来的class值，赋予class
- 代码实现：
<style>
.white{
background-color: white;
}
.blue{
background-color: lightskyblue;
}
.pink{
background-color: pink;
}
style>
<script>
//1、页面加载完成时，获取所有的tr
window.onload = function (ev) {
var trArr = document.getElementsByTagName("tr");
//2、遍历所有tr，除了0索引。
for (var i = 1; i <=trArr.length ; i++) {
var tr = trArr[i];
//3、遍历中：索引奇数保存white样式，索引偶数保存blue样式
if(i%2!=0){
tr.className = "white";
}else{
tr.className = "blue";
}
//4、遍历中：每遍历一个tr，绑定鼠标移入和移出事件
//5、鼠标移入事件：先保存之前的class值，再赋予新的class值：pink
tr.onmouseover = function (ev1) {
this["temp"] = this.className;
this.className = "pink";
};
//6、鼠标移出事件：获取原来的class值，赋予class
tr.onmouseout = function (ev1) {
this.className = this["temp"];
};
}
}
script>
dom方式绑定事件时，可以进行批量绑定
-
相关阅读:
Pandas中Series结构的切片详解以及常用技巧
带你了解MySQL数据库(三)
C语言题目逻辑实战总结
【QT】串口通信，usb通信QSerialPort::TimeoutErro超时问题
产品经理工作职责是什么？
Activity7-BPMN介绍
OpenCV（十六）：高斯图像金字塔
DxO PhotoLab 6 for Mac/Win：专业RAW图片编辑的利器
Linux系统下安装和卸载Redis
164-Angular项目和NodeExpress服务器发布（二）
- 原文地址：https://blog.csdn.net/m0_64550837/article/details/126213612