请问各位大虾!
我在表格里隐藏了某些行后,想通过jquery对表格从新进行隔行变色,请问我该怎么做!?
也就是说要过滤掉隐藏行,重新判断奇偶顺序。

解决方案 »

  1.   

    这个你在隐藏这个事件的时候应该触发相应行的class的改变
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    table{width:100px;}
    tr{width:100px; height:35px;}
    </style>
    </head><body>
    <table>
    <tr><td>1</td></tr>
        <tr><td>2</td></tr>
        <tr><td>3</td></tr>
        <tr style="display:none;"><td>4</td></tr>
        <tr><td>5</td></tr>
        <tr><td>6</td></tr>
    </table>
    <script>
    var tr =document.getElementsByTagName('tr'),
    len = tr.length,arr = [];

    for(var i = 0; i < len; i++){
    if(tr[i].style.display != 'none'){
    arr.push(tr[i]);
    }
    }

    for(var j = 0; j < arr.length; j++){
    if(j % 2){
    arr[j].style.background = '#666';
    }else{
    arr[j].style.background = '#777';
    }
    }
    </script>
    </body>
    </html>
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    td { border:1px solid #CCC; }
    </style><script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready( function() {
    $("tr:visible:odd").css('background-color', 'red');  //用:visible选择器即可
    });
    </script>
    </head><body>
    <table width="100%" border="0">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr style="display:none;">
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
    </body>
    </html>