Question

我最近发现了tablesort.js组件，它允许对纯HTML表格的行进行排序。有关小例子，请参阅this fiddle。

我试图了解如何创建表格标题中的排序指标（向上/向下箭头）。

tablesort.js使用的CSS非常小，不包含任何（背景）图像。另外，查看javascript代码并使用浏览器的开发人员工具并没有帮助我理解如何创建指标。

有人可以解释一下如何创建这些指标吗？

这是tablesort.js使用的CSS：

th.sort-header {
  cursor:pointer;
  }
th.sort-header::-moz-selection,
th.sort-header::selection {
  background:transparent;
  }
table th.sort-header:after {
  content:'';
  float:right;
  margin-top:7px;
  border-width:0 4px 4px;
  border-style:solid;
  border-color:#404040 transparent;
  visibility:hidden;
  }
table th.sort-header:hover:after {
  visibility:visible;
  }
table th.sort-up:after,
table th.sort-down:after,
table th.sort-down:hover:after {
  visibility:visible;
  opacity:0.4;
  }
table th.sort-up:after {
  border-bottom:none;
  border-width:4px 4px 0;
  }

Answer 1

他们正在使用伪元素：

table th.sort-header:hover:after {
    visibility: visible;
}
table th.sort-header:after {
    content: '';
    float: right;
    margin-top: 7px;
    border-width: 0 4px 4px;
    border-style: solid;
    border-color: #404040 transparent;
    visibility: hidden;
}

然后他们切换一个类来改变改变箭头的边框宽度样式。

编辑：为了澄清，边框宽度样式是箭头的形状。

tablesort.js如何创建排序指示箭头

1 个答案: