DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格隔行变色title>
<script src="../jquery.js">script>
<style>
table{
width:100%;
}
caption{
font-weight: 900;
font-size: 24px;
line-height: 2;
}
table,th,td{
/*
普通的边框效果
* border : 1px solid black;
为表格设置合并边框模式
border -collapse: collapse;
*/
border-bottom: 0.5px solid lightgrey;
border-collapse: collapse;
}
th,td{
height: 30px;
}
th{
color: green;
}
.bg{
background-color: #1E6FFF;
}
.bt{
background-color: #EEEFFF;
}
style>
head>
<body>
<table>
<caption>
Web前端就业课程
caption>
<tr>
<th>课程内容th>
<th>描述th>
<th>备注th>
tr>
<tr>
<td>设计与构建静态网站td>
<td>HTML&cSs基础内容td>
<td>还好td>
tr>
<tr>
<td>JavaScript核心语法td>
<td>ECMAScript语法内容td>
<td>还好td>
tr>
<tr>
<td>锋利的jQuerytd>
<td>首个第三方JS库td>
<td>很好td>
tr>
<tr>
<td>全面掌握Ajaxtd>
<td>异步交互技术td>
<td>很好td>
tr>
table>
<script>
//用jQuery方法实现
//让偶数行变色
$('table tr:even').attr('class','bt');
//用DOM方法实现
//1.定位页面中的元素->表格
var table = document.getElementsByTagName ('table')[0];//该方法返回集合
console.log(table);
// 2.根据元素定位所有的元素->行
var trs = table.getElementsByTagName ('tr');
console.log(trs);
// 3.循环遍历所有的元素
for (var i=0; i<trs.length; i++) {
var tr = trs[i];
//4.判断当前行是否为奇数或偶数
if (i % 2=== 1) {
//5.为当前元素设置class属性值为bg
//让奇数行变色
tr.className = 'bg';
}
}
script>
body>
html>
今日金句
失败之前无所谓高手，在失败的面前，谁都是凡人。
-
相关阅读:
(一)docker：建立oracle数据库
ChatGPT聊YOLO
Python——Python添加解释器Interpreter怎么选？
面向对象分析与设计好文章
notepad++ 批量替换删除指定字符之后 或者 之前的字符，Notepad+批量替换使用大全
Llama2-Chinese项目：3.2-LoRA微调和模型量化
醋氯芬酸小鼠血清白蛋白纳米粒Aceclofenac-MSA|利凡诺大鼠血清白蛋白纳米粒Ethacridine-RSA
【Apollo】调试与仿真实践
共筑智慧校园运维——监控易诚邀合作伙伴共襄盛举
12大类150个图像处理和深度学习开源数据集
-
原文地址：https://blog.csdn.net/weixin_50001396/article/details/126940365