jquery根据table某一格的内容修改整行的css

xiaoxiao2021-02-27  188

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的颜色覆盖

转载请注明原文地址: https://www.6miu.com/read-11161.html

最新回复(0)