模拟在table中移动鼠标，高亮显示鼠标所在行

浏览数：28 / 时间：2015年06月11日

在项目中有这样一个需求，在table中移动鼠标时，鼠标所在行高亮显示，其他行正常显示，为此做了一个模拟。

具体代码如下：

<!DOCTYPE html>
<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">
        body {
            border: none;
            padding: 0px;
            text-align: center;
        }

        table {
            flex-align: center;
            text-align: center;
            border: 0px;
            border-spacing: 0px;
            border-collapse: collapse;
        }

            table tr {
                border: 0px;
                background: url(images/1.jpg) repeat;
            }

        table, tr, td {
            width: 450px;
            height: 50px;
            border-spacing: 0px;
            margin: 0px;
            padding: 0px;
            border: 1px solid red;
        }

 </style>
    <script src="jquery-1.10.2.js"></script>
    <script type="text/javascript">

        $(function () {
            $(‘#tablem tr‘).css(‘background‘, ‘url(images/1.jpg) repeat‘);
            $(‘#tablem tr‘).mouseover(function () {
                $(this).css(‘background‘, ‘url(images/2.jpg) repeat‘).siblings().css(‘background‘, ‘url(images/1.jpg) repeat‘);
            });
        });
 </script>
 

<body>
    <table id="tablem">
        <tr>
　　          <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
        <tr>
            <td>51</td>
            <td>52</td>
            <td>53</td>
            <td>54</td>
        </tr>
    </table>
</body>
</html>