Find rest of table row

by doug65536

HTML

Click a cell, the one below it will turn red
<table border="1">
    <tr>
        <td>A1</td><td>B1</td><td>C1</td><td>D1</td><td>E1</td><td>F1</td><td>G1</td>
    </tr>
    <tr>
        <td>A2</td><td>B2</td><td>C2</td><td>D2</td><td>E2</td><td>F2</td><td>G2</td>
    </tr>
    <tr>
        <td>A3</td><td>B3</td><td>C3</td><td>D3</td><td>E3</td><td>F3</td><td>G3</td>
    </tr>
    <tr>
        <td>A4</td><td colspan="2">BC4</td><td>D4</td><td>E4</td><td>F4</td><td>G4</td>
    </tr>
</table>

JavaScript

$(function() {
    var cell_below = function(cell) {
        var row = cell.closest('tr');
        var cellindex = row.find('td').index(cell);
        var nextrow = row.next('tr');
        var curcol = 0;
        return nextrow.children('td').filter(function() {
            var cellspan = +$(this).attr('colspan') || 1;
            var result = curcol <= cellindex && curcol + cellspan > cellindex;
            curcol += cellspan;
            return result;
        });
    };
    
    $('table').bind('click', function(ev) {
        var item = $(ev.target);
        $('td').css({background: '#fff'});
        cell_below(item).css({background: 'red'});
    });
});