鼠标单击TR实现行变色效果，再次单击恢复原色

鼠标单击TR实现行变色效果，再次单击恢复原色 个人摸索出来的，先来张效果图：



对了有个隐藏的效果，如下图所示，有兴趣的可以看看（如果要看隐藏部分的内容，可放鼠标的光标可看到完整信息）



一，javaScript 代码部分（注意传参问题）

<script type="text/javascript">
/* 知识点5：单击某TR依照条件来变色（多参数传递方式）
知识点6：如何取标签的属性，内容等 如：tab.style.backgroundColor(取颜色)
*/
//单击某TR变色
function do_onclick(tab,valu){
if (tab.style.backgroundColor == "green") {//如果当前标签的颜色是绿
if(valu == 1){
tab.style.backgroundColor = "yellow";//如果当前标签的颜色是绿色且状态为待分析则把当前标签的颜色改为黄色
}else{
tab.style.backgroundColor = "#cee7ef";//如果当前标签的颜色是绿色且状态不为待分析则把当前标签的颜色改为原背景色
}
}else{
tab.style.backgroundColor = "green";//把非绿色改为绿色
}
}
</script>

二，jsp 页面代码

<table id="table1" border="1px">
<tr align="center">
<td>资料维护</td>
<td>RMA单号</td>
<td>序列号</td>
<td>机型</td>
<td>客户类别</td>
<td>样机来源</td>
<td>客户投诉现象</td>
<td>RMA收到时间</td>
<td>处理优先级别</td>
<td>申请人</td>
<td>当前状态</td>
<td>创建时间</td>
<td>FA收到样机时间</td>
<td>FA资料维护</td>
<td>根本原因</td>
<td>改善措施</td>
<td>失效零件料号</td>
<td>失效现象</td>
<td>失效类别</td>
<td>失效零件类别</td>
<td>工艺问题类别</td>
<td>客户导致失效类别</td>
<td>失效责任归属方</td>
<td>FA开始分析时间</td>
<td>FA分析人</td>
</tr>
<s:iterator value="FaModelList">
<!-- 知识点1：背景颜色依 状态来决定
知识点2：onclick 传参方式 this表示为当前标签，'${CURRENT_STATUS}' 表示取FaModelList内的值
-->
<tr style="background-color: <c:if test="${CURRENT_STATUS ==1}">yellow</c:if>" onclick="do_onclick(this,'${CURRENT_STATUS}')">
<td>
<c:if test="${CURRENT_STATUS ==1}">
<s:a action="FA_editInfo?FA_SID=%{FA_SID}">修改基本资料</s:a>
</c:if>
</td>
<td>${SN}<%-- ${RMA_NO} --%></td>
<td>${SN}</td>
<td>${MODEL_PN }</td>
<td>${CUST }</td>
<td>${MODEL_SOURE }</td>
<!-- 知识点3：日期格式化
知识点4：显示“年/月/日”，蕴藏“分/秒”（如果要看分/秒，可放鼠标的光标可看到完整信息）
前提：要先设置 td{white-space:nowrap;}
-->
<td id="CUST_REPORT" title="${CUST_REPORT_FAIL }"><div style="width:100px;white-space: nowrap;text-overflow:ellipsis; overflow:hidden;">${CUST_REPORT_FAIL }</div></td>
<td title="<fmt:formatDate value="${RMA_DATE }" pattern="yyyy-MM-dd HH:mm:ss"/>">
<div style="width:100px;white-space: nowrap;text-overflow:ellipsis; overflow:hidden;">
<fmt:formatDate value="${RMA_DATE }" pattern="yyyy-MM-dd HH:mm:ss"/>
</div>
</td>
<td><c:if test="${HANDLE_PRECEDENCE ==1}">正常</c:if>
<c:if test="${HANDLE_PRECEDENCE ==2}">急单</c:if>
</td>
<td>${CREATE_USER }</td>
<td><c:if test="${CURRENT_STATUS ==1}">待分析</c:if>
<c:if test="${CURRENT_STATUS ==2}">分析中</c:if>
<c:if test="${CURRENT_STATUS ==3}">分析完成</c:if>
</td>
<td title="<fmt:formatDate value="${CREATE_DATE }" pattern="yyyy-MM-dd HH:mm:ss"/>">
<div style="width:100px;white-space: nowrap;text-overflow:ellipsis; overflow:hidden;">
<fmt:formatDate value="${CREATE_DATE }" pattern="yyyy-MM-dd HH:mm:ss"/>
</div>
</td>
<td title="<fmt:formatDate value="${FA_RECEIVED_DATE }" pattern="yyyy-MM-dd HH:mm:ss"/>">
<div style="width:100px;white-space: nowrap;text-overflow:ellipsis; overflow:hidden;">
<fmt:formatDate value="${FA_RECEIVED_DATE }" pattern="yyyy-MM-dd HH:mm:ss"/>
</div>
</td>
<td>
<c:if test="${FA_RECEIVED_DATE == null}">
<s:a action="AN_add?FA_SID=%{FA_SID}" style="background-color: #FABF8F">新增分析资料</s:a><br>
</c:if>
<c:if test="${FA_RECEIVED_DATE != null}">
<s:a action="AN_editInfo?FA_SID=%{FA_SID}" style="background-color: green">修改分析资料</s:a>
</c:if></td>
<s:iterator value="analysisList">
<td>${ROOT_CAUSE}</td>
<td>${CORRECTIVE_ACTIONS}</td>
<td>${FAILURE_COMPONENT_PARTNUMBER}</td>
<td>${FAILURE_SYMPTOM}</td>
<td>${FAILURE_CATEGORY}</td>
<td>${FAILURE_COMPONENT_CATEGORY}</td>
<td>${PROCESING_ISSUE_CATEGORY}</td>
<td>${FAILURE_CCBC}</td>
<td>${FAILURE_RESPONSIBLE_PARTY}</td>
<td>${CREATE_DATE}</td>
<td>${CREATE_USER}</td>
<td><s:a action="addInfo" >主管最后确认结案</s:a></td>
</s:iterator>
</tr>
</s:iterator>
</table>

为此花费较多时间，现记录下来。