是否可以通过一行中最后一个单元格的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>
我不知道从哪里开始,但我至少可以将颜色警告为RGB:
$("table tr").find("td:last").each(function(index) {
alert($(this).css("background-color"));
});
答案 0 :(得分:5)
以下代码按手动键或背景颜色整数值对行进行排序。您可以在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" />