8

この例では:

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

td 4 の col の ID を取得するにはどうすればよいですか?

このjqueryコマンドで列番号を取得した場合：

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

cn は 0 になりますが、スタイルは col1 に属していることを示しており、td.col.id のようなコマンドが必要です

td の上の td で rowspan="2" を設定すると (例: td 4)、この td の列番号は col(または colgroup) の順序とは異なり、背景色を設定して表示します。

編集: td が col(colgroup) であることを知っている場合、dom ツリーで td からそれを要求する方法が必要なので、この問題を解決する方法があると思います。(Td4 特定の列のスタイルを示していますが、その列は誰ですか?)

4

3 に答える 3

1

<td>4</td>は 2 番目の tablerow の最初の子であるため、実際には列 0 を取得する必要があります。

行スパンなどを検出する複雑な関数を作成する代わりに、各テーブル セルに ID を割り当てるか、テーブル用の別のカスタム ソリューションを作成することをお勧めします。たとえば、特定の行ごとにいくつの列があるかを事前に知っていますか? または、実際の背景色または「秘密」の css 属性を識別として使用します。

ps。実際の問題を理解するまで、私の役に立たないフィドル。

編集 (以下の説明をお読みください):ここで説明されているように、カスタム css 属性を作成することは想定されていません。これらはブラウザによって無視されることがよくあります (そして 経由では利用できません.attr())。Sahar の解決策は、行のマージによって影響を受ける各要素にマークを付けて、その要素が何列を数えるべきかを記憶することでした。

于 2011-08-28T16:26:20.907 に答える
1

まず、td 自体の列番号を計算する必要があります。

これは、td の前の tds の数をカウントすることによって行われます。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;
    }
}

これらの 2 つの関数を使用すると、次のことができるはずです。

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/

于 2011-08-28T15:22:12.470 に答える