jQuery table sort 改变按列排序的颜色：答案

【问题标题】：jQuery table sort change the color of sorted by column:jQuery table sort 改变按列排序的颜色：
【发布时间】：2017-11-16 22:36:10
【问题描述】：

我有一个以下 html 表格和 jQuery 函数来按表格标题列对表格进行排序：

//sort summary table
$('th').click(function() {
  var table = $(this).parents('table').eq(0)
  var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
  this.asc = !this.asc;
  if (!this.asc) {
    rows = rows.reverse();
  }

  for (var i = 0; i < rows.length; i++) {
    table.append(rows[i]);
  }
});
	
function comparer(index) {
  return function(a, b) {
	var valA = getCellValue(a, index), 
        valB = getCellValue(b, index)
    return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
  }
}
      
function getCellValue(row, index) { 
  return $(row).children('td').eq(index).text();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
	<tr>
	  <th>S.No.</th>
	  <th>School</th>
	  <th>Campus City / State</th>
	  <th>Campaign Name</th>
	  <th>Work Order</th>
	</tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>EL PASO UNIVERSITY</td>
      <td> EL PASO/TX</td>
      <td>Full Campaign</td>
      <td>#10055</td>
    </tr>
    <tr>
      <td>2</td>
      <td>DALLAS UNIVERSITY</td>
      <td> DALLAS/TX</td>
      <td>Mini Campaign</td>
      <td>#10056</td>
    </tr>
    <tr>
    <td>3</td>
   	      <td>MINNESOTA UNIVERSITY</td>
      <td> MINNEAPOLIS/MN</td>
      <td>Full Campaign</td>
      <td>#10059</td>	
    </tr>
  </tbody>
</table>

排序表的所有功能都运行良好。但无法弄清楚如何让用户知道当前的订购表按哪一列排序。我只想添加简单的 css 颜色来分隔当前单击的列。有什么想法吗？

【问题讨论】：

标签： javascript jquery html sorting

【解决方案1】：

将 css 颜色添加到除单击的标题之外的所有标题将起到作用。这可以通过以下方式实现：

$('th').css({'background-color' : '#808080'}); 
$('th').css({'color' : '#FFFFFF'});
$(this).css('background-color', '#6f3d3d'); //change the background color
$(this).css({'color' : '#0000FF'});    //change the font color

只需将上面的代码添加到您的函数中：

//sort summary table
$('th').click(function(){
  //add your css trick
  $('th').css({'background-color' : '#808080'});
  $('th').css({'color' : '#FFFFFF'});
  $(this).css('background-color', '#6f3d3d');
  $(this).css({'color' : '#0000FF'});

  var table = $(this).parents('table').eq(0)
  var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
  this.asc = !this.asc
  if (!this.asc) {
    rows = rows.reverse();
  }
  for (var i = 0; i < rows.length; i++) {
    table.append(rows[i]);
  }
});
	
function comparer(index) {
  return function(a, b) {
    var valA = getCellValue(a, index), 
        valB = getCellValue(b, index)
      return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
  }
}
      
function getCellValue(row, index) { 
  return $(row).children('td').eq(index).text();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>S.No.</th>
      <th>School</th>
      <th>Campus City / State</th>
      <th>Campaign Name</th>
      <th>Work Order</th>
    </tr>
  </thead>
  <tbody>		
    <tr>  
      <td>1</td>
      <td>EL PASO UNIVERSITY</td>
      <td> EL PASO/TX</td>
      <td>Full Campaign</td>
      <td>#10055</td>
    </tr>
    <tr>
      <td>2</td>
      <td>DALLAS UNIVERSITY</td>
      <td> DALLAS/TX</td>
      <td>Mini Campaign</td>
      <td>#10056</td>
    </tr>
    <tr>
      <td>3</td>
      <td>MINNESOTA UNIVERSITY</td>
      <td> MINNEAPOLIS/MN</td>
      <td>Full Campaign</td>
      <td>#10059</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

您只需要在您的 JS 中添加一个条件，该条件将检查该列当前是否为排序依据列，

$('th').click(function() {
  if (!$(this).hasClass('sort-by')) {
    $('th').removeClass('sort-by');
    $(this).addClass('sort-by');
    // logic for sorting by this column
  }
});

在你的 CSS 中添加一个简单的规则

.sort-by {
  background-color: blue; // or whatever
}

【讨论】：