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

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

＆＃13;

//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();
}

＆＃13;

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

＆＃13;

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

jQuery表排序改变按列排序的颜色：

2 个答案: