jquery - 「rowspan」の影響を受ける行の列インデックスを取得する最も効率的な方法は何ですか?

Question

次の表を検討してください。

<table>
    <thead>
        <tr>
            <th scope="col" />
            <th scope="col">A</th>
            <th scope="col">B</th>
            <th scope="col">C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Apples</td>
            <td>Oranges</td>
            <td>Pears</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td rowspan="2">Subcategory Heading</td>
            <td>ASP.Net</td>
            <td>Other</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>MVC</td>
            <td>PHP</td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Red</td>
            <td>Green</td>
            <td>Blue</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">Some pointless footer content</td>
        </tr>
    </tfoot>
</table>

jQueryを使用して、テキスト「MVC」または「PHP」を含むセルの正しい列番号を取得するにはどうすればよいですか? 正解は列 3 ですが、使用.prevAll().lengthするだけでは前のセルの数だけがカウントされるため、この場合、実際の列の位置が正確に反映されませんか?

を使用する必要があると確信していますがeach()、最も効率的な実装も探しています。

score 3 · Accepted Answer

私は最近、同じ問題に対してこの状況の解決策を書きました:

jQueryを使用して各テーブルセルの「視覚的な場所」を見つけるにはどうすればよいですか?

これを探している人のための別の解決策かもしれません。

score 1 · Accepted Answer

このようなもの？

<!doctype html>
<table id="foo">
    <thead>
        <tr>
            <th scope="col" />
            <th scope="col">A</th>
            <th scope="col">B</th>
            <th scope="col">C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Apples</td>
            <td>Oranges</td>
            <td>Pears</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td rowspan="2">Subcategory Heading</td>
            <td>ASP.Net</td>
            <td>Other</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>MVC</td>
            <td>PHP</td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Red</td>
            <td>Green</td>
            <td>Blue</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">Some pointless footer content</td>
        </tr>
    </tfoot>
</table>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
    var table = $('table#foo');
    table.find('td[rowspan], th[rowspan]').each(function() {
    var cellNum,
        reference = this,
        columnNum = $(this).attr('rowspan'),
        parentTr = $(this).closest('tr'),
        parentTrs = $(this).closest('tr').parent().find('tr');

    parentTr.find('>td, >th').each(function(i,o) {
        if ( this == reference ) {
        cellNum = i;

        var counter = columnNum;

        while ( counter-- ) {
            $(this).closest('tr').next().find('>td,>th').each(function(i,o) {
            if ( cellNum == i ) {
                $(this).addClass('rowspan-affected');
                $(this).attr('colNum', columnNum);
            }
            });
        }
        }
    });

    /* testing
    window.num = num;
    window.parentTr = parentTr;
    window.parentTrs = parentTrs;
    */
    });
</script>

score 0 · Accepted Answer

検索手順を短縮するのに最も近いのは、次のようなことだと思います。

var counter = 0;
$("#idTable tbody tr").each(function(){

   var html = $(this).html();
   var php = html.indexOf("PHP") > -1 ? true : false;
   var mvc = html.indexOf("MVC") > -1 ? true : false;

   if(php || mvc) {
       $(this).find("td").each(function(){ counter += (($(this).html()=="PHP") || ($(this).html()=="MVC")) ? 1 : 0; });
   }

});

score 0 · Accepted Answer

このようなことを試してみてください。それはうまくいくので、どうしてですか:)

.stuffing {
    display: none;
}

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td colspan="3">1</td>
        <td class="stuffing"></td>
        <td class="stuffing"></td>
        <td>4</td>
    </tr>
</table>

var tb= document.querySelector('table');
tb.rows[0].cells[3].innerHTML;  //4
tb.rows[1].cells[3].innerHTML;  //4

私の質問に対する彼の答えに対して、この男に称賛を与えてください。

score 0 · Accepted Answer

まあ、最短の（過度の）単純化は次のとおりです。

var theCell = $('td:contains("MVC")');
col = theCell.parent().children().index(theCell);
row = theCell.parent().parent().children().index(theCell.parent());

返されるインデックスは 0 から始まることに注意してください。基本的に、まず目的の細胞を見つけます。列については、DOM のレベルをまで上げ、<tr>すべての子 (この場合は子孫と<td>)を取得し<th>、そのセット内の対象の要素の位置を見つけます。行については、この場合はまで登り、<tbody>すべての行を取得して、対象のの行の位置を見つけます<td>。

ご想像のとおり、テーブルの構造を変更すると、考えられる結果が変わります。ただし、取得したのと同じ方法でインデックスを後でプログラムで使用すると、同じセルに戻ることができます。<tbody>UI で何らかの方法でインデックスを視覚的に使用する場合、よりトリッキーになり、スパン、対 noなどを考慮する必要がある場合があるため、これを取り上げます<tbody>...

mederの回答よりも効率的かどうかはわかりません。しかし、それは間違いなくはるかに維持しやすいです! :)

jquery - 「rowspan」の影響を受ける行の列インデックスを取得する最も効率的な方法は何ですか?

5 に答える 5

Related

Reference