您的位置：首页 > 其它

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

2014-07-21 00:51 393 查看

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

显示结果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航