Как я могу получить идентификатор столбца тд (не номер столбца тд)?

Question

В этом примере:

<table border="1">
    <col id="col0" style="background-color: #FFFF00"/>
    <col id="col1" style="background-color: #FF0000"/>
    <tr><td rowspan="2">1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
</table>

Как получить идентификатор col для td 4?

Если я получу номер столбца с помощью этой команды jquery:

var cn = $(this).parent().children().index($(this));

cn будет 0, но его стиль показывает, что он принадлежит к col1, и мне нужен коменд, такой как td.col.id

, когда я устанавливаю rowspan = "2" на тд выше тд (например.td 4) номер столбца этого тд будет отличаться от его порядка col (или colgroup), и я установил цвет фона, чтобы показать его.

Редактировать: Я считаю, что есть способрешить эту проблему, потому что, когда td знает о его col (colgroup), должен быть способ спросить его у td в dom tree.(Td4 вы показываете стиль конкретного col, кто этот col?)

Answer 1

Сначала вы должны вычислить номер столбца самого тд.

Это делается путем подсчета количества тд перед нашим тд;принимая во внимание атрибуты colspan:

function getElementColumn(td)
{
    var tr = td.parentNode;
    var col = 0;
    for (var i = 0, l = tr.childNodes.length; i < l; ++i) {

        var td2 = tr.childNodes[i];

        if (td2.nodeType != 1) continue;
        if (td2.nodeName.toLowerCase() != 'td' && td2.nodeName.toLowerCase() != 'th') continue;

        if (td2 === td) {
            return col;
        }
        var colspan = +td2.getAttribute('colspan') || 1;
        col += colspan;
    }
}

Затем вы можете выполнить итерацию элементов col и вернуть элемент, соответствующий номеру столбца.

Сначала мы должны найти элемент colgroup.Тогда это похоже на вычисление номера столбца td:

function getCol(table, colNumber)
{
    var col = 0;
    var cg;
    for (var i = 0, l = table.childNodes.length; i < l; ++i) {
        var elem = table.childNodes[i];
        if (elem.nodeType != 1) continue;
        if (elem.nodeName.toLowerCase() != 'colgroup') continue;
        cg = elem;
        break;
    }
    if (!cg) return;

    for (var i = 0, l = cg.childNodes.length; i < l; ++i) {
        var elem = cg.childNodes[i];
        console.log(elem);

        if (elem.nodeType != 1) continue;
        if (elem.nodeName.toLowerCase() != 'col') continue;

        if (col == colNumber) return elem;

        var colspan = +elem.getAttribute('span') || 1;
        col += colspan;
    }
}

С помощью этих двух функций вы сможете сделать это:

var id = getCol(table, getElementColumn(td)).id;

http://jsfiddle.net/wHyUQ/1/

jQuery версия

function getElementColumn(td)
{
    var col = 0;
    $(td).prevAll('td, th').each(function() {
        col += +$(this).attr('colspan') || 1;
    });
    return col;
}

function getCol(table, colNumber)
{
    var col = 0, elem;
    $(table).find('> colgroup > col').each(function() {
        if (colNumber == col) {
            elem = this;
            return false;
        }
        col += +$(this).attr('span') || 1;
    });
    return elem;
}

http://jsfiddle.net/wHyUQ/2/

Answer 2

Разрешение промежутков между строками или colspans было бы невероятно сложным. Я предлагаю вам перебрать все элементы col, установить для них ширину 0px и проверить, не влияет ли это на ширину элемента td или th. Если это так, это соответствующий столбец.

Пример:

// Your table elements
$table = $('yourTableSelector');
$cell = $('td or th');
$cols = $table.find('colgroup > col');

// determine the related col
// by setting a width of 0px. the 
// resulting width on the element should be negative or zero.
// this is hacky, but the other way would
// be to resolve rowspans and colspans, which
// would be incredibly complex.
var $relatedColumn = $();
$cols.each(function(){
    var $col = $(this);
    var prevStyle = $col.attr('style') === 'string' ? $col.attr('style'): '';
    $col.css('width', '0px');
    if($cell.width() <= 0){
        $relatedColumn = $col;
        $col.attr('style', prevStyle); // reset
        return false;
    } else {
        $col.attr('style', prevStyle); // reset
    }
});

Answer 3

<td>4</td> - первый дочерний элемент второй таблицы, поэтому вы действительно должны получить столбец 0.

вместо разработки сложной функции, которая обнаруживает интервалы строк и т. Д., Может быть целесообразно просто назначить идентификаторы для каждой ячейки таблицы или создать другое настраиваемое решение для вашей таблицы. например Вы заранее знаете, сколько столбцов имеет каждая конкретная строка? Или вы используете фактический цвет фона или «секретный» атрибут css в качестве идентификации.

пс. моя бесполезная скрипка , пока я не понял действительную проблему.

изменить (см. Обсуждение ниже): как описано здесь , вы не должны создавать собственные атрибуты CSS; они часто игнорируются браузером (и недоступны через .attr()). Решением Sahar было пометить каждый элемент, затронутый объединением строк, чтобы запомнить, сколько столбцов должен учитывать элемент.