Home/ Questions/Q 360161
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T12:27:45+00:00

Consider the following table: <table> <thead> <tr> <th scope=col /> <th scope=col>A</th> <th scope=col>B</th>

  • 0

Consider the following table:

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

How would I retrieve the correct column number for the cell containing the text “MVC” or “PHP” using jQuery? The correct answer would be column 3, but just using .prevAll().length will only count the number of previous cells, which will not accurately reflect their actual column position in this case?

I’m sure I’ll need to use each(), but I’m looking for the most efficient implementation as well.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Something like this?

    <!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>
    • 0