像表格排序器一样向 添加排序箭头
我正在尝试向我的表格添加双箭头（向上和向下），例如表格排序器插件可以。
这是我的fiddle。由于某种原因，jsfiddle 中甚至没有出现一个箭头，但它可以在我的原始表格上运行。
我试过这个：
$("table th").addClass("headerSortUp");
$("table th").addClass("headerSortDown");
但这没有用。知道我该怎么做吗？
最好的解决方案没有图像，纯CSS。只需输入类名即可headerSortDown and headerSortUp on the td or th行和插入符号将会出现。
table td,
table th {
border: 1px solid silver;
}
.headerSortDown:after,
.headerSortUp:after {
content: ' ';
position: relative;
left: 2px;
border: 8px solid transparent;
}
.headerSortDown:after {
top: 10px;
border-top-color: silver;
}
.headerSortUp:after {
bottom: 15px;
border-bottom-color: silver;
}
.headerSortDown,
.headerSortUp {
padding-right: 10px;
}
<table>
<thead>
<tr>
<th class="headerSortDown">ID</th>
<th class="headerSortUp">Username</th>
<th>Fullname</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>John Doe</td>
</tr>
<tr>
<td>2</td>
<td>Jenny</td>
<td>Jenny Smith</td>
</tr>
<tr>
<td>3</td>
<td>Tom</td>
<td>Tom Doe</td>
</tr>
</tbody>
</table>
另请检查我的 JSFiddle：http://jsfiddle.net/rTXXz/一个工作示例。
更新：针对 chrome 进行了修复
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
|
