解决方案 »

  1.   

    创建tr的时候再调用下换色的
    <style>
    tr{background:#fff;}
    tr:nth-child(2n){background:#f00}
    </style>
      

  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{ border-collapse:collapse; padding:0px; margin:0px;}
    table tr td{ border:#CCCCCC 1px solid; width:600px; height:20px; font-size:12px;}
    </style>
    <script src="http://cloud.xing-xing.com/jquery.js" language="javascript" type="text/javascript"></script>
    <script>
    (function($){
    $.fn.tableUI=function(options){
    defaults={
    "oddTr":"#f0f0f0",
    "evenTr":"#FFFFFF",
    }
    var opts=$.extend({},defaults,options); //合并属性的原则后面的覆盖前面的
    $(this).each(function(index,ele){
    var table=$(this);
    $(table).find("tr :even").css({"background":opts.evenTr});
    $(table).find("tr :odd").css({"background":opts.oddTr});
    })
    }
    })(jQuery)
    $(function(){
    $("#tab").tableUI({
    oddTr:"#0CC",     //奇数行颜色
    evenTr:"#FFFFFF", //偶数行颜色
    });
    $("#btn").click(function(e) {
    $("#tab").append('<tr><td>点击删除</td></tr>');
    $("#tab").tableUI({
    oddTr:"#0CC",     //奇数行颜色
    evenTr:"#FFFFFF", //偶数行颜色
    });
        });
    $("#tab tr").live('click',function(e) {
            $(this).remove();
    $("#tab").tableUI({
    oddTr:"#0CC",     //奇数行颜色
    evenTr:"#FFFFFF", //偶数行颜色
    });
        });
    })
    </script>
    </head>
    <body>
    <input type="button" value="添加" id="btn" />
    <table id="tab">
    <tr><td>点击删除</td></tr>
    <tr><td>点击删除</td></tr>
    <tr><td>点击删除</td></tr>
    <tr><td>点击删除</td></tr>
    </table>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <h3>注意jQuery的版本38行的live方法在jQuery1.9以下管用高于1.9用on替换live方法我这个jQuery是1.8的版本</h3>
    </body>
    </html>