div align="center" id="divAll">

<table id="tab" border="1" cellpadding="0" cellspacing="10">

    <tr>

        <td date="一月活动<br>这是一月活动"><h2>1</h2>JAN</td>

        <td date="二月活动<br>这是二月活动"><h2>2</h2>FER</td>

        <td date="三月活动<br>这是三月活动"><h2>3</h2>MAR</td>

    </tr>

    <tr>

        <td date="四月活动<br>这是四月活动"><h2>4</h2>APR</td>

        <td date="五月活动<br>这是五月活动"><h2>5</h2>MAY</td>

        <td date="六月活动<br>这是六月活动"><h2>6</h2>JUN</td>

    </tr>

    <tr>

        <td date="七月活动<br>这是七月活动"><h2>7</h2>JUL</td>

        <td date="八月活动<br>这是八月活动"><h2>8</h2>AUG</td>

        <td date="九月活动<br>这是九月活动"><h2>9</h2>SEP</td>

    </tr>

    <tr>

        <td date="十月活动<br>这是十月活动"><h2>10</h2>OCT</td>

        <td date="十一月活动<br>这是十一月活动"><h2>11</h2>NOV</td>

        <td date="十二月活动<br>这是十二月活动"><h2>12</h2>DEC</td>

    </tr>

</table>

<div id="div_on"></div>

</div>

<style>

    *{

        padding: 0;

        margin: 0;

    }

    body {

        background: #f6f9fc;

        font-family: arial;

    }

    div{

        background-color: #ccc;

        width: 50%;

    }

    td{

        background-color: black;

        color: white;

    }

    #tab{

        margin: 0 auto;

        width: 30%;

        text-align: center;

    }

    #div_on{

    width: 30%;

    height: 50px;

    background: #D6D6D6;

    margin: 0 auto;

}

    </style>

var tdAlls = null,

    divDom = null;

 $(function(){

//     initDom();

    addEvent();

});

//function initDom(){

    tdAlls=$('td');      //下面用不到的话这里可以注释掉

    divDom=$('div_on');

//}

function addEvent(){

    $('td').mouseover(function(){     //这里可以用上面定义的变量名 也可以直接写当前的赋值变量名（$('td'))

        $('td').css('color',"white");

        $(this).css('color',"red");

        var str=$(this).attr('date');

        $('#div_on').html(str);

    }).mouseout(function(){

        $('td').css('color',"white");

           $(this).css('color',"red");

    });

}