jquery 给满足条件的td改变样式

本篇重点是在学：

1、jquery 选择器 

2、jquery find()

3、jquery each（）

内容描述：

给一张表格，用来颜色来显示事务的不同状态，红色代表有人，蓝色代表空闲，黄色代表繁忙，怎样用jquery来实现这样的效果？

html部分：

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>1</td>
        <td>3</td>
    </tr>
     <tr>
        <td>2</td>
        <td>1</td>
        <td>2</td>
        <td>2</td>
    </tr>
     <tr>
        <td>3</td>
        <td>2</td>
        <td>3</td>
        <td>1</td>
    </tr>
</table>

测试按钮：<button id="text"> 测试</button>

css部分

<style type="text/css">
    td{
        padding: 20px 20px;
        border: 1px solid gray;
    }
</style>

jquery部分：

<script type="text/javascript">
    $("#text").click(function(){
        var text1 = "1";
        var text2 = "2";
        var text3 = "3";
        $("table tr").find('td').each(function(){
            if($(this).html()==text1){
                $(this).css("background","red");
            }
            if($(this).html()==text2){
                $(this).css("background","blue");
            }
             if($(this).html()==text3){
                $(this).css("background","yellow");
            }
        })
        
    })
</script>
内容解析：

text1，text2，text3代表的是表格中td标签内的值，我将不同的状态设置成不同的值，

然后通过each遍历来得到所有的td标签，再通过获取td标签的内容与设置的值进行对比，满足条件则显示对应的颜色。

重难点：

     对find的理解，find是找到所有，在这里我们要找的只有td标签，所以要将东西放入到最接近td标签的tr标签上。通过遍历获取所有的td标签。

最终效果：