?
下面代码可以直接运行查看结果,(同附件)
<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].onmouseover=function(){
??? addClass(this,crossTagNameClass);
??? }
??? tagNames[m].onmouseout=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>