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

最新推荐文章于 2023-02-23 13:49:53 发布

weixin_30677475

最新推荐文章于 2023-02-23 13:49:53 发布

阅读量148

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/wllzbky/p/gl.html

版权

在项目中有这样一个需求，在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>

显示结果如下：

转载于:https://www.cnblogs.com/wllzbky/p/gl.html

weixin_30677475

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模拟在table中移动鼠标，高亮显示鼠标所在行

在项目中有这样一个需求，在table中移动鼠标时，鼠标所在行高亮显示，其他行正常显示，为此做了一个模拟。具体代码如下：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" conte...
复制链接

扫一扫