下面代码可以直接运行查看结果,(同附件)
<html>
<head>
<style>
.gray{background:#eee;cursor:pointer}
.red{background:#FFFF00!important; cursor:pointer}
</style>
<script>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function addClass(elem,value){
if(!elem.className){
elem.className=value;
}else{
var newClass=elem.className;
newClass+=" ";
newClass+=value;
elem.className=newClass;
}
}
function highLight(elemid,tagName,tagNameHighClass,crossTagNameClass){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById(elemid)) return false;
var elemid=document.getElementById(elemid);
tagNames=elemid.getElementsByTagName(tagName);
var odd=true;
for(var i=0; i<tagNames.length; i++){
if(odd==true){
addClass(tagNames[i],tagNameHighClass)
odd=false;
}else{
odd=true;
}
}
for(var m=0; m<tagNames.length; m++){
tagNames[m].oldClassName=tagNames[m].className;
tagNames[m].οnmοuseοver=function(){
addClass(this,crossTagNameClass);
}
tagNames[m].οnmοuseοut=function(){
this.className=this.oldClassName;
}
}
}
function highLightItab(){
highLight("b_g_date","tr","gray","red");
}
addLoadEvent(highLightItab);
</script>
</head>
<body>
<table width="100%" id="b_g_date">
<tr>
<td>A1</td>
<td>B1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
</tr>
<tr>
<td>A3</td>
<td>B3<td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
</tr>
</body>
</html>
重点是标红部分,如果不那么些,
写作: .red{background:#FFFF00; cursor:pointer}
那么是没有高亮效果的
写作 .red{*background:#FFFF00!important; cursor:pointer}
也是没有没有高亮效果的
备注:table也可以这么写:
<table width="100%" id="b_g_date">
<s:iterator value="users" status="status">
<s:url action="userDetail" id="goToHistory">
<s:param name="id" value="id" />
</s:url>
<tr class="<s:if test="#status.odd == true ">odd</s:if><s:else>even</s:else>">
<td width="5%"><a href="<s:property value="goToHistory"/>"><s:property value="#status.index" /></a></td>
<td width="20%"><s:property value="name" /></td>
<s:if test='callBarring=="1"'>
<td width="20%">True</td>
</s:if>
<s:else>
<td width="20%">False</td>
</s:else>
<td width="20%"><s:property value="role.name" /></td>
<c:choose>
<c:when test='${loginuser.role == 3 || loginuser.role == 4}'>
<td width="15%"><a href="update.action?simId=<s:property value="id"/>">Change</a></td>
</c:when>
<c:otherwise>
<td width="15%"></td>
</c:otherwise>
</c:choose>
</tr>
</s:iterator>