我正在使用 Twitter 的 Bootstrap,其中包括表格行的简洁悬停效果,并且我想添加用户在行点亮时所期望的可点击性。有什么万无一失的方法可以做到这一点吗?
是的,我已经完成了我的研究,但每个解决方案都非常尴尬并且充其量也有缺陷。任何帮助将不胜感激。
最佳答案
HTML
<table id="example">
<tr>
<th> </th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td><a href="apples">Edit</a></td>
<td>Apples</td>
<td>Blah blah blah blah</td>
<td>10.23</td>
</tr>
<tr>
<td><a href="bananas">Edit</a></td>
<td>Bananas</td>
<td>Blah blah blah blah</td>
<td>11.45</td>
</tr>
<tr>
<td><a href="oranges">Edit</a></td>
<td>Oranges</td>
<td>Blah blah blah blah</td>
<td>12.56</td>
</tr>
</table>
CSS
table#example {
border-collapse: collapse;
}
#example tr {
background-color: #eee;
border-top: 1px solid #fff;
}
#example tr:hover {
background-color: #ccc;
}
#example th {
background-color: #fff;
}
#example th, #example td {
padding: 3px 5px;
}
#example td:hover {
cursor: pointer;
}
jQuery
$(document).ready(function() {
$('#example tr').click(function() {
var href = $(this).find("a").attr("href");
if(href) {
window.location = href;
}
});
});
我得到了代码HERE
关于javascript - HTML 可点击表格行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12115550/