table部分内容如下:
<table class="table"> <tbody> <tr> <th>进度</th> </tr> <s:iterator value="#request.lists" id="lists"> <tr id="list_content"> <td class="scheduleTd"><s:if test="#lists.schedule==1">未开始</s:if> <s:elseif test="#lists.schedule==2">进行中</s:elseif> <s:elseif test="#lists.schedule==3">已完成</s:elseif></td> </tr> </s:iterator> </tbody> </table>
此处使用了struts2中的s:iterator遍历获取request中的数据并显示在table中,之后由s:if进行判断,根据获得的数字显示表格中内容,这一步会引起显示内容中带有回车,导致在之后js判断字符串的时候出现问题
js部分如下:
function onload(){
$(".scheduleTd").each(function(){ var str1=$(this).text(); var str2="已完成"; str1=str1.replace(/^\s+|\s+$/g,""); if(str1 == str2){ $(this).parent().css("background","#d5d5d5"); } }) }
*text()和html()差别在于html()会取得标签,而text()只读取文本内容。
例如在<td>hell<b>o<td>中,用$("td").text()只获取hello文本内容,而html()同时显示“hell<b>o”
*.replace(/^\s+|\s+$/g,"");是为了去除字符串中的回车和空格,在上面有提到,若不加这一步,str1和str2的比较无法完成
*$(this).parent().css("background","#d5d5d5"); 要用$(this)表示仅对当前选中的class为scheduleTd的表格操作,.parent()表示选定它的直系父元素,即当前选定的表格躲在的行(当前td所在的tr),对tr的背景颜色进行操作。此时注意,td的颜色未被设置,若td颜色已设置,这一步对tr的颜色修改会被td的颜色覆盖
