Phil.Wheeler Phil.Wheeler - 1 month ago 6
jQuery Question

What is the most efficient way to retrieve the column index for rows affected by "rowspan"?

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.

Answer

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>