1

次のコード: http://jsfiddle.net/ueP5U/1/

私は、すべての td/th メンバーに相対インデックスが与えられているテーブルを持っています。<tr>

var tableIterator = function(table, process) {
$.each(table.children(), function() { //cycle through thead,tbody,tfoot
    $(this).children().each(function() { //cycle through thead, tbody, tfoot "tr"s
        process.call($(this));
    });
});
}



tableIterator($("table"), function() {
  $(this).find("td,th").each(function() {
    $(this).text("Index: " + $(this).index()); 
  });
});

</p>

テーブルには 2 つ以上のヘッダーを含めることができます。この場合、親ヘッダーはより大きな colspan を取得し、下部ヘッダーは同等の量の列を与えることによって適合します (つまり、インデックス 4 にはインデックス 1 と 2 が付けられた 2 つの子があります)。

私が実際にやろうとしているのは、親ヘッダーを作成し、そのすべての「子」(もちろん実際の dom の子ではない) を選択し、選択した列に基づいて同じアクションを実行することです。

私はロジックをダウンさせました：各ヘッダー要素は、以前の兄弟の「子」インデックスを見つけて、そのインデックスを取得するために自分の子にcolspanの量を追加する必要があります（つまり、インデックス5 [colspan = 2]、インデックス4に移動し、見つけるその最後の子 (インデックス 1)) とその「子」に colspans の量を追加して、index: 2 と index: 3 (+=1*colspan.val() 回) を持つようにします。

同じことが tbody 'children' にも当てはまります。

jQuery.filter(return $("thead").findByColumn(2[or any other top header index])) を使用して表示されるものに従って、バインド要素を含むオブジェクト配列を作成する必要があると仮定します

これを始めても問題が発生しているので、いくつかの支援が必要です.クリックによるハイライト、max_widthによる非表示、または選択に応じた列での実行の例は大歓迎です!

4

1 に答える 1

0 
function iterTable(table, callback) {
    // Keeps track of which indices are blocked by larger cells
    var blocked = [];

    $("thead,tbody,tfoot", table).each(function (groupIndex) {
        var groupName = this.tagName;

        $("tr", this).each(function (rowIndex) {
            var colIndex = 0;
            var blockedRow = blocked[0] || [];

            $("td,th", this).each(function () {
                var $cell = $(this);
                var colSpan = parseInt($cell.prop("colspan")) || 1;
                var rowSpan = parseInt($cell.prop("rowspan")) || 1;

                // Skip all blocked cells
                while (blockedRow[colIndex]) {
                    colIndex++;
                }

                callback(groupIndex, groupName, rowIndex, colIndex, $cell);

                // Mark all sub-cells as blocked.
                for (var i = 0; i < rowSpan; i++) {
                    for (var j = 0; j < colSpan; j++) {
                        if (!blocked[i]) blocked[i] = [];
                        blocked[i][colIndex+j] = true;
                    }
                }
                colIndex += colSpan;
            });

            // Pop the first element; We don't need it any more.
            blocked.shift();
        });
    });
}

var columns = [];
iterTable($('table'), function (groupIndex, groupName, rowIndex, colIndex, $cell) {
    $cell.text(groupName + " " + rowIndex + "," + colIndex);
    if (groupName == "TBODY") {

        // Save the cell into a specific column.
        if (!columns[colIndex]) columns[colIndex] = [];
        columns[colIndex][rowIndex] = $cell;

    }
    else { // THEAD or TFOOT

        var colSpan = parseInt($cell.prop("colspan")) || 1;
        $cell.click(function () {
            // Toggle the background for the column under the header.
            for (var i = 0; i < colSpan; i++) {
                $.each(columns[colIndex+i], function () {
                    $(this).toggleClass('selected');
                });
            }
        });

    }
});

(jsfiddle)

于 2012-11-08T00:04:23.757 に答える