Как выбрать ячейки таблицы в многострочном заголовке таблицы в правильном порядке?

Question

У меня есть тета, как это:

<thead>
   <tr>
     <th rowspan="2">Cell-1</th>
     <th rowspan="2">Cell-2</th>        
     <th colspan="3">Header</th>
     <th rowspan="2">Cell-6</th>
   </tr>
   <tr>
     <th">Cell-3</th>
     <th">Cell-4</th>
     <th">Cell-5</th>
   </tr>
</thead>

Мне нужно создать селектор jquery с ячейками в правильном порядке 1-2-3-4-5-6. Прямо сейчас мой селектор выглядит так:

hdrCols = thead.find( "tr:first th[rowspan=2], TR:first TH[rowspan=2]").add( thead.find( "tr:last-child th, TR:last-child TH" ) );

Это дает мне 1-2-6-3-4-5 и нарушает мой макет.

Есть ли способ создать селектор, который получает ячейки в правильном порядке? Я не могу перемещать столбцы, поэтому любое решение должно включать это.

Answer 1

Я бы попытался поместить выбранные элементы в массив, а затем написать свою собственную функцию для сортировки массива. Итак, шаг 1, получите элементы и поместите их в массив:

var elements = thread.find("th");
var elements_array = [];
elements.each(function(){
    elements_array.push($(this));
});

... затем пользовательская функция, чтобы попытаться отсортировать их:

function custom_sort(a, b)
{
    // these elements are TH jQuery objects...
    var content_a = a.text();
    var content_b = b.text();

    // perform string comparison, for example...
    // return -1 if a comes before b, 1 if b comes before a, and
    // 0 if they're equal...
    return (a < b ? -1 : (a > b ? 1 : 0));
}

// finally sort the array of elements...
elements_array.sort(custom_sort);

Это должно сработать, хотя я предполагаю, что элементы TH должны быть отсортированы по их содержимому, поэтому я реализовал сравнение строк в сортировке, хотя вы могли бы заменить это на все, что вам нужно! Надеюсь, это поможет!

Answer 2

Если вам нужно сделать это без добавления атрибутов и имен сортируемых столбцов, вы можете попробовать это:

function extractTableHeader($table) {
    var $thead = $table.find('thead'),
        $row1 = $thead.children().first(),
        $children1 = $row1.children(),
        $row2 = $row1.next(),
        $children2 = $row2.children(),
        cells = [[],[]];

    // map first row
    $children1.each(function(){
        var $th = $(this),
            rows = $th.prop('rowspan'),
            cols = $th.prop('colspan'),
            _rows = rows > 1,
            _cols = cols > 1;

        while (cols) {
            cells[0].push(_cols ? null : this);

            if (!_rows) {
                cells[1].push(cells[0].length - 1);
            }
            cols--;
        }
    });

    $.each(cells[1], function(i, o){
        cells[0][o] = $children2[i];
    });

    return $(cells[0]);
}

$(function() {
    var $th = extractTableHeader($('table')),
        order = [];

    $th.each(function(){
        order.push($(this).text());
    });
    console.log(order.join(', '));
});

// output: Cell-1, Cell-2, Cell-3, Cell-4, Cell-5, Cell-6

Answer 3

Попробуйте просто использовать функцию JavaScripts sort () . Как это: http://jsfiddle.net/6wYQt/

function sortHeaders(a, b) {
    var x = $(a).text().toLowerCase();
    var y = $(b).text().toLowerCase();

    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}

thead   = $('thead');
hdrCols = thead.find( "tr:first th[rowspan=2], TR:first TH[rowspan=2]").add( thead.find( "tr:last-child th, TR:last-child TH" ) );

hdrCols.sort(sortHeaders);

console.log(hdrCols);
​