javascript - jQuery 表格排序更改按列排序的颜色 :

Question

我有以下 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 颜色来分隔当前单击的列。有什么想法吗？

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