如下table,实现隔行换色该怎么弄。
 <table class="tbody" id="maintable">
                        <col width="1200px"></col> <col width="1400px"></col> <col width="1400px"></col><col></col>
                        <tbody>
                        <s:iterator value="qinshulist" var="y" status="i">
                        <input type="hidden" name="qinshulist1[${i.index}].qinshuid" value="${y.qinshuid}">
                            <tr>
                                <td rowspan="3" style="text-align: center;width:7%">
                                    <c:if test="${y.qstuts == 1}"><span class="text_red">${y.chengwei}&nbsp;</span></c:if>
                                    <c:if test="${y.qstuts != 1}">${y.chengwei}</c:if>
                                </td>
                                <td rowspan="3" style="text-align: center;width:7%">${y.xingming}&nbsp;</td>
                                <td rowspan="3" style="text-align: center;width:6%">${y.minzu}&nbsp;</td>
                                <td  style="text-align: center;width:7%" rowspan="3">
                                    <c:if test="${3 == y.mianmaoid }">群众</c:if>  
                                    <c:if test="${2 == y.mianmaoid }">团员</c:if> 
                                    <c:if test="${1 == y.mianmaoid }">党员</c:if>  
                                </td>
                                <td rowspan="2" style="width:10%">${y.iccard }</td>
                                <td style="text-align: left;width:20%">${y.jz_pro} &nbsp; ${y.jz_city}&nbsp;${jz_county} &nbsp;${jz_dizhi}</td>
                                <td style="width:10%">户口所在地派出所</td>
                                <td rowspan="3" style="text-align: center;width:6%">${y.memo}&nbsp;</td>
                                <td rowspan="3" style="text-align: center;width:7%">${y.riqi}&nbsp;</td>
                                <td rowspan="3" style="text-align: center;width:13%">
                                    <input type="checkbox" name="checkboxqinshu1_${y.qinshuid}" value="4" onClick="changeboxqinshu(this,1,${y.qinshuid})" <c:if test="${(4 == y.qstuts) || (null == y.qstuts)|| (y.qstuts== 2)}">checked="checked"</c:if>>合格
                                    <input type="checkbox" name="checkboxqinshu2_${y.qinshuid}" value="1" onClick="changeboxqinshu(this,2,${y.qinshuid})" <c:if test="${1 == y.qstuts}">checked="checked"</c:if>>不合格
                                    <input type="checkbox" name="checkboxqinshu3_${y.qinshuid}" value="3" onClick="changeboxqinshu(this,3,${y.qinshuid})" <c:if test="${3 == y.qstuts}">checked="checked"</c:if>>重调
                                </td>
                                <td rowspan="3" style="width:7%" >
                                    <label >
                                        <textarea id="stumm_${y.qinshuid}" name="qinshulist1[${i.index}].qmemo" style="width: 98%; height:50px">${y.qmemo}</textarea>
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: left;width:20%">${y.jzp_pro} &nbsp; ${y.jzp_city}&nbsp;${y.jzp_county} &nbsp;${y.jzp_yb}</td>
                                <td style="width:10%">经常居住地派出所</td>
                            </tr>
                            <tr>
                                <td >  &nbsp;${y.mobile}</td>
                                <td >${y.danwei}&nbsp;${y.tongxindizhi }&nbsp;${y.dw_yb}&nbsp;</td>
                                <td >工作单位</td>
                            </tr>
                        </s:iterator>
                </tbody>
            </table>

js方法如下:

 $(function(){
         var i=0,j=0,k=0;
         $("#maintable tr:gt(0)").each(function(n){
             if($(this).find("td").size()==11){
                 j=$(this).find("td:eq(3)").attr("rowspan");
             };
             i++;
             if(k%2==0){
                 $(this).css("backgroundColor","#f1f5f8")
             };
             if(i==j){
                 i=0;
                 k++;
             };
         });
    });

实现效果不正确,rowspan=2的错开一行,rowspan=3的错开两行。。该怎么改求指教。

3个回答

搞那么多判断干嘛,基偶不是odd和even嘛,试试这样:
$(function(){
$("#maintable tr:odd").css("backgroundColor","#f1f5f8");
});

隔行换色有两种方式,一种使用纯CSS样式来实现,一种是使用js,各有利弊,使用css好处是写法简单,缺点是浏览器兼容性问题,IE8以下不支持

 .tbody tr:nth-child(2n){
            background: #aaa
 }
 .tbody tr:nth-child(2n+1){
            background: #bbb
 }

当然使用js1楼的代码可以参考,前提是你使用了jquery库,使用js优点是没有浏览器兼容性问题,缺点是就为了个隔行换色,而引入一个js文件,得不偿失(只从问题角度情况考虑)

引用jquery,然后
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})

一句就够了,//实现表格的隔行换色效果

kaohamaququ
kaohamaququ $(function(){ $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]}) });
5 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐