jQuery 将排序箭头添加到 <th> 就像表格排序器

Question

提问by Cornwell

I'm trying to add double arrows (up and down) to my table like the tablesorterplugin does.

我正在尝试像tablesorter插件那样向我的表格添加双箭头（向上和向下）。

Here is my fiddle. For some reason, not even one arrow shows up in jsfiddle, but it works on my original table.

这是我的小提琴。出于某种原因，jsfiddle 中甚至没有一个箭头出现，但它在我原来的桌子上工作。

I tried this:

我试过这个：

$("table th").addClass("headerSortUp");
$("table th").addClass("headerSortDown");

But it didn't work. Any idea how I could do it?

但它没有用。知道我该怎么做吗？

Answer 1

采纳答案by Manoj Yadav

Issue is with your .headerSortUpbackground. I have changed it with below:

问题在于你的.headerSortUp背景。我已将其更改为以下内容：

background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%;

jsFiddle with absolute bg

jsFiddle 与绝对 bg

Answer 2

回答by Kapitein Witbaard

The best solution without images, pure CSS. Just put the classnames headerSortDownand headerSortUpon the tdor throws and the caret will appear.

没有图像的最佳解决方案，纯 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;
}

<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>

Also check my JSFiddle: http://jsfiddle.net/rTXXz/for a working example.

还可以查看我的 JSFiddle：http: //jsfiddle.net/rTXXz/以获取工作示例。

UPDATE: Fixed for chrome

更新：修复了 chrome

Answer 3

回答by bitWorking

I get invalid property valuein chrome.

我进入invalid property value铬。

With quotes it works:

使用引号它可以工作：

background: url("data:image/gif;base64, R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw=") no-repeat 99%;

I converted the double arrow to base64, too.

我也将双箭头转换为 base64。

JSFiddle

Answer 4

回答by Tyler Forsythe

Here is a descending arrow inline. Unfortunately, I do not know how to make the data smaller, but the resulting image is the same size.

这是一个内嵌的下降箭头。不幸的是，我不知道如何使数据更小，但生成的图像大小相同。

background: url('data:image/gif;base64,R0lGODlhFQAEAPcAAAAAACMtMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAVAAQAAAgaAP8JHCgwgMGDAQgqXIgw4cKHAw9CnFhwYkAAOw==') no-repeat 99%;

Answer 5

回答by pertrai1

I was able to get it to work using another background image instead of what you were using. Maybe this can give you some insight into the problem:

我能够使用另一个背景图像而不是你正在使用的背景图像来让它工作。也许这可以让您对问题有所了解：

.headerSortUp {
  background: url(http://placehold.it/25x25) no-repeat 99%;
}
.headerSortDown {
  background: url(http://placehold.it/25x25) no-repeat 99%;
}

Fiddle

小提琴

Answer 6

回答by Lee Curran

Note: I am adding this answer because it offers an alternative way to add the arrows without using an image but does follow the logic of keeping the arrows in the background.

注意：我添加此答案是因为它提供了一种无需使用图像即可添加箭头的替代方法，但确实遵循了将箭头保留在背景中的逻辑。

A way to add the arrows without an image while keeping that styling of the images (just have to tweak it to taste and I didn't optimize the divs or the logic in the css ~ more of a proof of concept (fast prototype)). Another benefit of this approach is that you can easily change the arrows coloring with classes plus if you place the two arrows in separate divs you could even hide one when it is already selected (currently they just change color separately on hover).

一种在没有图像的情况下添加箭头的方法，同时保持图像的样式（只需要调整它的口味，我没有优化 div 或 css 中的逻辑~更多是概念证明（快速原型）） . 这种方法的另一个好处是，您可以轻松地使用类更改箭头的颜色，此外，如果将两个箭头放在单独的 div 中，您甚至可以在它已经被选中时将其隐藏（目前它们只是在悬停时单独更改颜色）。

See the example in action!

看例子！

HTML

<table class="test-table">
  <tr class="headRow">
    <th>
<div class="table-head-container">
    <div class="table-head-background">
      <div class="right-text">
        <div class="small-frame">
            <div class="up-arrow">&#9650</div>
            <div class="down-arrow">&#9660</div>
        </div>
      </div>
    </div>
  <div class="Col-header">First</div>
</div>
    </th>
    <th>
<div class="table-head-container">
    <div class="table-head-background">
      <div class="right-text">
        <div class="small-frame">
            <div class="up-arrow">&#9650</div>
            <div class="down-arrow">&#9660</div>
        </div>
      </div>
    </div>
  <div class="Col-header">Last</div>
</div>
     </th>
    <th>
<div class="table-head-container">
    <div class="table-head-background">
      <div class="right-text">
        <div class="small-frame">
            <div class="up-arrow">&#9650</div>
            <div class="down-arrow">&#9660</div>
        </div>
      </div>
    </div>
  <div class="Col-header">Phone</div>
</div>
    </th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>555-5555</td>
  </tr>
  <tr class="evenRow">
    <td>Jane</td>
    <td>Smith</td>
    <td>555-5555</td>
  </tr>
  <tr>
    <td>Homer</td>
    <td>Simpson</td>
    <td>555-5555</td>
  </tr>
</table>

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;
}

jQuery 将排序箭头添加到 <th> 就像表格排序器

提问by Cornwell

采纳答案by Manoj Yadav

回答by Kapitein Witbaard

回答by bitWorking

回答by Tyler Forsythe

回答by pertrai1

回答by Lee Curran

相关推荐

最近更新

标签

jQuery 将排序箭头添加到 <th> 就像表格排序器

提问by Cornwell

采纳答案by Manoj Yadav

回答by Kapitein Witbaard

回答by bitWorking

回答by Tyler Forsythe

回答by pertrai1

回答by Lee Curran

相关推荐

jQuery 如何在没有标题的情况下提取响应内容（仅正文）？使用jQuery

jQuery 如何使用css并排正确浮动两列

jQuery jsPdf 为pdf页面添加边距

jQuery 脚本导致“拒绝执行内联脚本：启用内联执行需要‘unsafe-inline’关键字、哈希……或随机数”

相关推荐

最近更新

标签