用JS实现表格中隔行显示不同颜色
第一种:
<style>
tr{bgColor:expression(
this.bgColor=((this.rowIndex)%2==0 )? ‘white‘
: ‘yellow‘);
}
</style>
<table id="oTable" width="100"
border="1" style="border-collapse:collapse;">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
第二种:
<script language="javascript">
var oTable = document.all[‘oTable‘];
for(var
i=0;i<oTable.rows.length;i++){
oTable.rows[i].bgColor =
(i%2==0) ? ‘white‘ : ‘yellow‘ ;
}
</script>
<table
id="oTable" width="100" border="1" style="border-collapse:collapse;">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
第三种(第二种的改进版):
用布儿变量替代之:内存换时间
var isToggled =
false;
var oTable = document.all[‘oTable‘];
for(var
i=0;i<oTable.rows.length;i++){
isToggled = ! isToggled;
oTable.rows[i].bgColor = isToggled ? "white" : "yellow" ;
}
鼠标经过时改变背景颜色
<table><tr><td width="100" height="100"
onmouseover="style.backgroundColor=‘#C86F70‘"
onmouseout="style.backgroundColor=‘#DDC676‘"
bgcolor="#DDC676">ihandu</td></tr></table>
我的方法一:
<!--<script
language="javascript">
window.onload = function(){ //表格隔行显示不同颜色
var tab = document.getElementById(‘tab‘);
for(var
i=0;i<tab.rows.length;i++){
tab.rows[i].bgColor = (i%2==0) ?
‘white‘ : ‘#e6e6e6‘ ;
}
}
</script>
-->
我的方法二:
<tr height = "22px"
align=center style="c:if
test=‘${status.count%2==0}‘>#FFFFFF</c:if><c:if
test=‘${status.count%2!=0}‘>#E6E6E6</c:if>" >
相关文章
- 10-18使用jQuery实现表格隔行换色,点击一行显示高亮颜色
- 10-18winform中dataGridView隔行显示不同的背景色,鼠标移动上显示不同颜色,离开后变回原色
- 10-18winform中dataGridView隔行显示不同的背景色,鼠标移动上显示不同颜色,离开后变回原色
- 10-18用JS实现表格中隔行显示不同颜色
- 10-18使用原生js实现一个列表数据展示页面不同的项目状态使整行显示不同颜色。
- 10-18设计table表格,用js设计偶数行和奇数行显示不同的颜色
- 10-18用JQuery实现表格隔行变色和突出显示当前行
- 10-18(转)用JS实现表格中隔行显示不同颜色
- 10-18Vue.js,select中的option用ajax想循环控制值的显示 v-model可以实现但提示报错,这是为什么?
- 10-18js实现表格中不同单元格内容的替换(不同浏览器的节点属性兼容问题)