我必须维护大量经典的ASP页面，其中许多页面都有表格数据，根本没有排序功能。无论原始开发人员在数据库查询中使用的顺序是什么，都将使您陷入困境。
我想给这些页面添加一些基本的排序，我用javascript在客户端完成。我已经完成了对给定列上的给定表按照给定方向进行排序的基本脚本，只要表受到我们在这里遵循的某些约定的限制，它就能很好地工作。
我想为UI做的是用插入符号(^)指明排序方向，然后。什么?是否有一个特殊的字符是与插入符号相反的?字母v不太合适。或者，是否有其他角色配对我可以使用?
当前回答
你能用document。write在span中绘制svg路径吗?span不是svg工作所必需的，它只是确保svg与carat旁边的任何文本保持内联。我使用margin-bottom将它与文本垂直居中，可能还有另一种方法。这是我在我的博客的侧导航(减去js)所做的。如果旁边没有文本，就不需要span或margin-bottom offset。
<div id="ID"></div>
<script type="text/javascript">
var x = document.getElementById('ID');
// your "margin-bottom" is the negative of 1/2 of the font size (in this example the font size is 16px)
// change the "stroke=" to whatever color your font is too
x.innerHTML = document.write = '<span><svg style="margin-bottom: -8px; height: 30px; width: 25px;" viewBox="0,0,100,50"><path fill="transparent" stroke-width="4" stroke="black" d="M20 10 L50 40 L80 10"/></svg></span>';
</script>
其他回答
你可以考虑使用字体Awesome，而不是使用unicode或其他图标
代码可以像(a)一样简单，包括字体很棒，例如<链接rel="样式表" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> (b)制作一个按钮，例如<button><i class="fa fa-arrow-down"></i></button>
所以我想要插入符号完全像OWA一样，所以我下载了office365icons。woff从的 https://owa.example.com/owa/prem/15.1.1913.10/resources/styles/fonts/office365icons.woff(必须登录才能做到，所以通过浏览器)，然后，从网站复制浓缩风格:
@font-face {
font-family: 'Office365Icons';
src: url('/fonts/office365icons.woff') format('woff');
font-weight: normal;
font-style: normal;
}
span.o-icon {
font-family: 'Office365Icons';
font-size: 14pt;
line-height: 21px;
color: #666;
}
最后:
<span class="o-icon"></span>
一个强大的选择——也是一个激发创造力的选择——就是用方框画的角色来设计你自己的角色。
想要一个向下的“插入符号”?这里有一个:╲╱
我最近发现了它们——我很高兴使用这种自定义设计的字符来标记周围的东西:)。
你可以使用黑色三角形，Unicode值U+25b2和U+25bc。或者箭头，U+2191和U+2193。
没有上下颠倒的插入符号，但是你可以很容易地用CSS旋转插入符号。这是一个看似完美的简单解决方案。按“运行代码片段”查看它的运行情况:
.upsidedown { 变换:旋转(180度); -webkit-transform:旋转(180度); -o-transform:旋转(180度); -ms-transform:旋转(180度); ｝ .upsidedown。插入符号{ 显示:inline-block; 位置:相对; 下:0.15 em; ｝ 更多条目<span class="颠倒插入号">^</span> .
请注意以下几点…
I did a little correction for the positioning of the caret, as it is normally high (thus low in the rotated version). You want to move it a little up. This 'little' is relative to the font-size, hence the 'em'. Depending on your font choice, you might want to fiddle with this to make it look good. This solution does not work in IE8. You should use a filter if you want IE8 support. IE8 support is not really required nor common in 2018. If you want to use this in combination with Twitter Bootstrap, please rename the class 'caret' to something else, like 'caret_down' (as it collides with a class name from Twitter Bootstrap).
