jq做的简单的变色表格

<style>
    .td{
        background:#DBDBDB
    }    
    .td:hover{
        background:#E01F22
    }
</style>

 

 

 

 

 

 

 

<table>
<br>
<button id="startColor">开启变色</button>
<table width="200px" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
        </tr>
</table>

 

$(function(){
    $('#startColor').click(function(){
        if($(this).html() == '关闭变色'){
            $(this).css("background","#DBDBDB");
            $(this).html('开启变色');
            $("td").removeClass("td");//关闭按钮
        }else{
            $(this).css("background","#E01F22");
            $(this).html('关闭变色');
            $('td').addClass('td');
            
            
        }
    })
})