实现 表格 隔行变色 案例
<!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>锋利的jQuery</td><td>首个第三方JS库</td><td>很好</td></tr><tr><td>全面掌握Ajax</td><td>异步交互技术</td><td>很好</td></tr></table><script>//用jQuery方法实现//让偶数行变色$('table tr:even').attr('class','bt');//用DOM方法实现//1.定位页面中的<table>元素->表格var table = document.getElementsByTagName ('table')[0];//该方法返回集合console.log(table);// 2.根据<table>元素定位所有的<tr>元素->行var trs = table.getElementsByTagName ('tr');console.log(trs);// 3.循环遍历所有的<tr>元素for (var i=0; i<trs.length; i++) {var tr = trs[i];//4.判断当前行是否为奇数或偶数if (i % 2=== 1) {//5.为当前<tr>元素设置class属性值为bg//让奇数行变色tr.className = 'bg';}}</script></body></html>
今日金句
失败之前无所谓高手，在失败的面前，谁都是凡人。
