按行中最后一个单元格的背景颜色对表格进行排序

Question

是否可以在页面加载时通过一行中最后一个单元格的 css 属性对表格进行排序？我希望表格行按最后一个单元格的 bg-color 排序。

表：

<table>
    <tr>
        <td>Foo</td>
        <td>Foo</td>
        <td style="font-weight:bold; background-color:#dee">Foo</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Foo</td>
        <td style="background-color:#ffa">Foo</td>
    </tr>
    <tr>
        <td>put me on top</td>
        <td>Foo</td>
        <td style="background-color:#eee">Foo</td>
    </tr>
</table>

我不知道从哪里开始，但我至少可以提醒颜色为 RGB：

$("table tr").find("td:last").each(function(index) {
    alert($(this).css("background-color"));
});

测试：http://jsfiddle.net/AqTTJ/6/

Answer 1

以下代码按手动键或按背景颜色整数值对行进行排序。您可以在jsFiddle 上试用。

JavaScript

$(document).ready(function() {
  // Variable declarations:
  var tableId = '#table';
  var autoSort = true;
  var rowArr = getRows(tableId);
  var keySort = [];

  // Add a click handler to the sort button
  // that will call autoSortKeys() and pass
  // in either a manual key array or an
  // auto-sorted array.
  $('#sort').click(function() {
    autoSort = $('#autoSort').is(':checked');
    keySort = autoSort
        ? autoSortKeys(rowArr)
        : [0xffee77, 0xaaffaa, 0xff6666];
    sortTable(tableId, rowArr, keySort);
  });
});

// Sorts a table based on the array of
// keys that are passed into the function.
function sortTable(tableId, rows, keys) {
  $(tableId).empty();
  $.each(keys, function(indexK, valueK) {
    $.each(rows, function(indexR, valueR) {
      if (valueR[0] === valueK) {
        $(tableId).append(valueR[1]);
      }
    });
  });
}

// Converts an rgb() value returned from Jquery
// into an integer value for comparison.
function rgbToInt(color) {
  var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
  var red = parseInt(digits[2]);
  var green = parseInt(digits[3]);
  var blue = parseInt(digits[4]);
  return parseInt((blue | (green << 8) | (red << 16)), 10);
};

// Stores every row in a table designated table
// as a sub-array comprised of the background color
// integer value and the row DOM element.
function getRows(tableId) {
  var arr = new Array();
  $(tableId+' tr').each(function() {
    var bg = $(this).find('td:last-child').css('backgroundColor');
    var key = rgbToInt(bg);
    arr.push([key, $(this)]); // [bg-color, <tr />]
  });
  return arr;
}

// Automatically sorts rows based on their background
// color integer value from highest to lowest.
function autoSortKeys(arr) {
  var keys = new Array();
  $.each(arr, function(index, value) {
    keys.push(value[0]);
  });
  var uniqueKeys = new Array();
  $.each(keys, function(index, value){
    if($.inArray(value, uniqueKeys ) === -1)
      uniqueKeys.push(value);
  });
  delete keys; // garbage collect
  return uniqueKeys .sort().reverse();
}

HTML

<table id="table">
  <tr>
    <td>Foo</td>
    <td>Foo</td>
    <td style="font-weight:bold; background-color:#fe7">One</td>
  </tr>
  <tr>
    <td>Foo</td>
    <td>Foo</td>
    <td style="font-weight:bold; background-color:#fe7">One</td>
  </tr>
  <tr>
    <td>Foo</td>
    <td>Foo</td>
    <td style="background-color:#f66">Three</td>
  </tr>
  <tr>
    <td>Foo</td>
    <td>Foo</td>
    <td style="font-weight:bold; background-color:#fe7">One</td>
  </tr>
  <tr>
    <td>Foo</td>
    <td>Foo</td>
    <td style="background-color:#afa">Two</td>
  </tr>
  <tr>
    <td>Foo</td>
    <td>Foo</td>
    <td style="background-color:#f66">Three</td>
  </tr>
</table>
<br />
<label for="autoSort"> Auto Sort </label>
<input type="checkbox" id="autoSort" checked="CHECKED" />
<input type="button" id="sort" value="Sort" />