将排序箭头添加到，如表格分类器
我正在尝试像tableorter插件一样向我的表添加双箭头（向上和向下）。
这是我的小提琴 。 出于某种原因，甚至没有一个箭头显示在jsfiddle中，但它可以在我的原始表上运行。
我试过这个：
$("table th").addClass("headerSortUp"); $("table th").addClass("headerSortDown"); 但它没有用。 知道怎么做吗？
问题在于.headerSortUp背景。 我用下面改了：
background: url(http://sofzh.miximages.com/jquery/bg.gif) no-repeat 99%;
jsFiddle with absolute bg
没有图像的最佳解决方案，纯CSS 。 只需将类headerSortDown和headerSortUp放在td或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; }
ID Username Fullname 1 John John Doe 2 Jenny Jenny Smith 3 Tom Tom Doe
我在chrome中获得了invalid property value 。
引用它有效：
background: url("data:image/gif;base64, R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw=") no-repeat 99%;
我也将双箭头转换为base64。
的jsfiddle
这是一个内联的下降箭头。 不幸的是，我不知道如何使数据更小，但生成的图像大小相同。
background: url('data:image/gif;base64,R==') no-repeat 99%;
我能够使用另一个背景图像而不是你正在使用的工作。 也许这可以让您对问题有所了解：
.headerSortUp { background: url(http://placehold.it/25x25) no-repeat 99%; } .headerSortDown { background: url(http://placehold.it/25x25) no-repeat 99%; }
小提琴
注意：我正在添加此答案，因为它提供了一种在不使用图像的情况下添加箭头的替代方法，但确实遵循了将箭头保留在背景中的逻辑。
一种在没有图像的情况下添加箭头的方法，同时保持图像的样式（只需要调整它的味道，我没有优化div中的div或逻辑〜更多的概念certificate（快速原型）） 。 这种方法的另一个好处是，您可以轻松地更改箭头着色类加上如果您将两个箭头放在单独的div中，您甚至可以在已经选中时隐藏一个（目前它们只是在hover时单独更改颜色）。
查看实际操作中的示例 ！
HTML
▲ ▼ First ▲ ▼ Last ▲ ▼ Phone John Doe 555-5555 Jane Smith 555-5555 Homer Simpson 555-5555
CSS
.table-head-container { position: relative; color: white; max-width: 100px; } .test-table { border: solid black 1px; } .headRow { background-color: green; color: white; } .headRow > th { border: solid black 2px; padding: 10px 20px 10px 5px; min-width:100px; font-size: 1.6em } .evenRow { background-color: #E8E8E8; } table { border-collapse: collapse; } tr > td { border: solid black 1px; padding: 5px; } .Col-header { text-align: left; } .table-head-background { position: absolute; top: -10; left: 15; bottom: 0; right: 0; z-index: 1; width: 0; color: white; background-color:green; } .table-head-background > .right-text { text-align: right; } .table-head-background > .right-text > .small-frame { position: absolute; left: 80px; width: 5px !important; word-wrap: break-word; } .table-head-background > .right-text > .small-frame > .up-arrow, .table-head-background > .right-text > .small-frame > .down-arrow { font-size: .8em; } .table-head-background > .right-text > .small-frame > .up-arrow:hover, .table-head-background > .right-text > .small-frame > .down-arrow:hover { color: blue !important; }