【JavaScript学习——表格的隔行换色+高亮显示】的更多相关文章

JavaScript学习——表格的隔行换色+高亮显示

1.案例一:我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息,显示效果如下: 1)新标签 <thead> //表头 <tr> <th></th> </tr> </thead> <tbody> //表格内容 <tr> <td></td> 9 </tr> </tbody> 2)步骤分析 第一步:确定事件(onload)并为其绑定一个函数 第二步:书写函数(…

jQuery_完成表格的隔行换色

表格的颜色一样不利于区分,而利用jQuery则可以很方便的进行表格的隔行换色操作,原表如下: 这样看着很不方便,但是隔行换色之后非常便捷清楚. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行换色</title> <link rel="stylesheet" href="…

Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）

  内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor   Visual Studio Code 1.32.1     typesetting   Markdown   code <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U…

使用JS创建表格以及隔行换色（包括隔N行换色）

<html> <head> <title></title> <style> table{ width:800px; border-collapse:collapse; border:1px solid #9BC2E0; } table td,th{ width:120px; height:30px; font-size:13px; border:1px solid #9BC2E0; } tr.even{ background:red; } tr.…

JS案例四：表格的隔行换色以及高亮显示

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function() { var oldColor; var tblEle = document.getElementById("tbl"); var len = tblEle.tBodies[0]…

模块：jquery实现表格的隔行换色

效果图: 知识点精讲:jquery中$("tr:odd")和$("tr:even")选择器分别代表奇数行和偶数行,并且索引是从0开始,即第一行为偶数: 代码实现过程: 样式写法: <style type="text/css"> .even{background-color:#F0C040;}//定义奇数行背景色 .odd{background-color:#93BEE2;}//定义偶数行背景色 </style> html代…

Angular 学习笔记——ng-repeat 隔行换色

<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/angular-1.3.0.js"><…

js课程 4-11 表格如何实现隔行换色

js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script> 22 for(i=0;i<10;i++){ 23 if(i%2==0){ 24 document.write('<h2 class="hcls">'+i+'</h2>'); 25 }else{ 26 document.write('<h2>…

javascript 表格隔行换色

用到的知识点: 获取表格元素 tbody 和 rows都是有索引的 这里我们只有一组tbody所以 索引是0 偶数行 索引取余2为0 奇数行 索引取余2不为0 通过 遍历行索引设置相应的颜色. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格隔行换色</title> <script type="text/javascript…

jQuery学习(四)——使用JQ完成表格隔行换色

1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色. 2.具体代码实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行换色&…