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

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

表:

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

---

测试：

以下代码按手动键或背景色整数值对行进行排序。你可以在这里试一试

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

$（文档）.ready（函数（）{
//变量声明：
var tableId='#table'；
var autoSort=true；
var rowArr=getRows（tableId）；
var keySort=[]；
//将单击处理程序添加到排序按钮
//这将调用autoSortKeys（）并传递
//在手动键阵列或
//自动排序数组。
$（“#排序”）。单击（函数（）{
自动排序=$（“#自动排序”）。是（“：选中”）；
键排序=自动排序
？自动排序键（rowArr）
：[0xffee77，0xaaffaa，0xff6666]；
可排序（tableId、rowArr、keySort）；
});
});
//根据数组对表进行排序
//传递到函数中的键。
函数可排序（表ID、行、键）{
$（tableId）.empty（）；
$。每个（键、函数（indexK、valueK）{
$.each（行、函数（索引、估价师）{
如果（估价师[0]==valueK）{
$（tableId）.append（估价师[1]）；
}
});
});
}
//转换从Jquery返回的rgb（）值
//转换为整数值进行比较。
函数RGB点（颜色）{
变量数字=/（.*）rgb\（\d+）、（\d+）、（\d+）/.exec（颜色）；
var red=parseInt（数字[2]）；
var green=parseInt（数字[3]）；
var blue=parseInt（数字[4]）；
返回parseInt（（蓝色|）（绿色）“排序”是什么意思？您需要更具体一些。是否只检查元素是否有，比如说，
#eee
，如果有，请将其放在顶部？是否要按六进制或
rgb（）排序
components？或按颜色字母顺序？如果不清楚，很抱歉。我希望表格行按其最后一个单元格的bg颜色排序。请参阅-按十六进制代码定义排序列表将是一流的，但谷歌表示这很复杂。我还可以添加一些css类tho。如果添加类，则应该能够使用getClass并执行sor从那里开始。这很好，但我不明白如何定义自定义顺序？你不能，除非你明确说出你希望行的顺序。你的帖子说你希望按背景颜色排序。--#顶部f66行，中部fe7行，底部afa行。我所做的只是将最后一行移到第一行之前…排序？SEE新答案-我将行映射更改为2D数组，因为由于颜色不唯一，映射键被覆盖。
$(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();
}

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