Question

我当前正在对表格进行排序，我想使用箭头指示正在对哪一列进行排序。我现在可以使用箭头进行排序，但想更改当前正在排序的行中箭头的颜色。我该怎么做？

这是我正在使用的代码：

$(function() {
  $("th.pc").on('click', function() {
    $(this).toggleClass("down");
    var rows = $(".dental_table tbody tr").get();
    rows.sort(sortTable);
    $.each(rows, function(index, row) {
      $(".dental_table").children("tbody").append(row);
    });
    if (ascending) {
      ascending = false;
    } else {
      ascending = true;
    }
  });
});

var ascending = false;

function sortTable(a, b) {
  var A = parseInt($(a).children('td').eq(0).text().replace(/[^\d.]/g, ""), 10);
  var B = parseInt($(b).children('td').eq(0).text().replace(/[^\d.]/g, ""), 10);

  if (ascending) {
    if (A > B) return 1;
    if (A < B) return -1;
  } else {
    if (A > B) return -1;
    if (A < B) return 1;
  }
  return 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="table-responsive">
  <table class="dental_table table">
    <thead id="thead">
      <tr>
        <th class="pc">Unit Price</th>
        <th id="st_id">SKU</th>
        <th id="st_name">Name</th>
      </tr>
    </thead>
    <tbody id="tbody">
      <tr>
        <td>$3</td>
        <td>2</td>
        <td>Dental Product 1</td>
      </tr>
      <tr>
        <td>$2</td>
        <td>1</td>
        <td>Dental #2</td>
      </tr>
      <tr>
        <td>$5</td>
        <td>4</td>
        <td>Pharma 3</td>
      </tr>
      <tr>
        <td>$1</td>
        <td>5</td>
        <td>Oral 4</td>
      </tr>
      <tr>
        <td>$4</td>
        <td>3</td>
        <td>Dental 5</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

要更改箭头的颜色（在CSS中定义为字符，您必须按照此处的操作更改color属性（其中blue向下）是red）。

$(function(){
 $("th.pc").on('click', function(){
     $(this).toggleClass("down");
        var rows = $(".dental_table tbody tr").get();
        rows.sort(sortTable);
        $.each(rows, function(index, row){
                $(".dental_table").children("tbody").append(row);
        });
      if (ascending) {
       ascending = false; 
      } else {
       ascending = true; 
      }
    });
});

var ascending = false;

function sortTable(a,b){
    var A = parseInt($(a).children('td').eq(0).text().replace(/[^\d.]/g,""), 10);
    var B = parseInt($(b).children('td').eq(0).text().replace(/[^\d.]/g,""), 10);


  if (ascending) {
    if (A > B) return 1;
    if( A < B) return -1;
  } else {
    if (A > B) return -1;
    if( A < B) return 1;
  }
    return 0;

}

thead{background-color:lightblue}
thead tr th{cursor:pointer}
thead tr th:hover{background-color:#cccccc}
th.pc:after{
  content: "\25B2";
  color: blue;
}
th.pc.down:after{
  content: "\25BC";
  color: red;
}

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">       </script>
 <div class="table-responsive">
     <table class="dental_table table">
            <thead id="thead">
                <tr>
                    <th class="pc">Unit Price</th>
                    <th id="st_id">SKU</th>
                    <th id="st_name">Name</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr>
                    <td>$3</td>
                    <td>2</td>
                    <td>Dental Product 1</td>
                </tr>
                <tr>
                    <td>$2</td>
                    <td>1</td>
                    <td>Dental #2</td>
                </tr>
                <tr>
                    <td>$5</td>
                    <td>4</td>
                    <td>Pharma 3</td>
                </tr>
                <tr>
                    <td>$1</td>
                    <td>5</td>
                    <td>Oral 4</td>
                </tr>
                <tr>
                    <td>$4</td>
                    <td>3</td>
                    <td>Dental 5</td>
                </tr>
            </tbody>
        </table>
</div>

Answer 2

修改后的CSS：

thead{background-color:lightblue}
thead tr th{cursor:pointer}
thead tr th:hover{background-color:#cccccc}
th.pc:after{
  content: "\25B2";
}
th.pc.down:after{
  content: "\25BC";
}
.custom-up:after {
    content: "\25B2";
    color: green;
}

.custom-down:after {
   content: "\25BC"; 
   color: blue;
}

修改后的JS：

$(function(){
 $("th.pc").on('click', function(){
     $(this).toggleClass("down");
        var rows = $(".dental_table tbody tr").get();
        rows.sort(sortTable);
        $.each(rows, function(index, row){
                $(".dental_table").children("tbody").append(row);
        });
      if (ascending) {
       ascending = false; 
       $(this).addClass('custom-down');
       $(this).removeClass('custom-up');
      } else {
       $(this).addClass('custom-up');
       $(this).removeClass('custom-down');
       ascending = true; 
      }
    });
});

var ascending = false;

function sortTable(a,b){
    var A = parseInt($(a).children('td').eq(0).text().replace(/[^\d.]/g,""), 10);
    var B = parseInt($(b).children('td').eq(0).text().replace(/[^\d.]/g,""), 10);


  if (ascending) {
    if (A > B) return 1;
    if( A < B) return -1;
  } else {
    if (A > B) return -1;
    if( A < B) return 1;
  }
    return 0;

}

基本上，我们覆盖CSS中的类，并将其添加到toggle操作中；您可以弄乱颜色并玩弄它；希望对您有帮助。

更改切换箭头的颜色，jQuery

2 个答案: