要使用Prototype突出显示表格行,您可以使用以下方法:
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>广州</td>
</tr>
</tbody>
</table>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
tr:hover {
background-color: #f5f5f5;
}
document.observe('dom:loaded', function() {
$$('#myTable tr').each(function(row) {
row.observe('mouseover', function() {
row.addClassName('highlight');
});
row.observe('mouseout', function() {
row.removeClassName('highlight');
});
});
});
.highlight {
background-color: yellow;
}
这样,当鼠标悬停在表格行上时,该行将以黄色背景色突出显示。当鼠标移开时,背景色将恢复正常。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云