IE8 chrome 中 table隔行换色解决办法

今天把项目生成好后，发布到万维网上进行测试，发现table的隔行换色在IE8，chorem中不能正常显示。找了许多资料，CSS看样是不能解决，只能用JS来控制了

IE8以上的版本代码，只需要CSS即可

tr{ background-color:expression('#F8F8F8,#EFEFEF'.split(',')[rowIndex%2]); }

IE8以下的版本代码，是需要CSS与JS共同完成的：

首先定义好两个CSS，代码如下：

.tr1{background-color:#fff;}

.tr2{background-color:#00ff;}

其实写JS代码，代码如下：

οnlοad=function(){

　　var trs=document.getElementById("tbid").getElementsByTagName("tr");//获取tbid的table中所有tr的信息

for(var i=0;i<trs.length;i++)

{

　　　　if(i%2==0)

trs[i].className="tr1";

else

trs[i].className="tr2";

}

参考资料

转载于:https://www.cnblogs.com/chenhuzi/archive/2010/07/08/1773884.html

IE8 chrome 中 table隔行换色解决办法相关推荐

一眼就会table隔行换色、table表头固定、隔行色、鼠标移动行换色
抽出时间整理笔记:table头部固定.超出宽度可横向移动,主信息隔行换色.鼠标移动变色.举例: code : <!DOCTYPE HTML> <head><meta ht ...
table 隔行换色
<title>使用JavaScript隔行变色的效果</title> <style type="text/css">body{font-size ...
chrome jquery ajax请求,jQuery.ajax在Chrome中无法正常执行的解决办法
在较新的webkit内核浏览器中使用 $.post/load/get 等方式发送数据至某页面后,无法正常获取返回的内容.直接跳至 .error() 中. 显然 webkit 收到一个错误. 而在 IE ...
JavaScript-表格隔行换色·鼠标上移换色·合并显示
HTML <table id="tab1" border="1" width="800" align="center&quo ...
Vue中实现表格隔行换色效果
一.原理在 Vue 中,进行表格行的循环输出时,一般使用 v-for 指令,每次循环都能得到该行的索引 index ,用每一行的索引除以2取余,余数等于1,可以使用一种颜色作为背景色,余数等于0,可 ...
java中的各行换色_java生成excel文件并且隔行换色。
实体类实例: @Data @Table(name = "test_user") @Entity @ExcelTarget(value = "userDO") / ...
Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
隔行换色案例||全选和全不选||QQ表情选择||多选下拉列表左右移动
01.隔行换色.html <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
【前端3】jquary：页面加载，选择器，隔行换色，Dom，全选，动画，遍历，广告/抽奖，表单校验插件
文章目录 1.jquery框架引入:$("mydiv") 当成id选择器 2.jquery版本/对象:$(js对象) -> jquery对象 3.jquery的页面加载事件: ...

IE8 chrome 中 table隔行换色解决办法

IE8 chrome 中 table隔行换色解决办法相关推荐

最新文章

热门文章