Loop through selected table rows with JavaScript

Question

Hi,

I have a table, containing a checkbox to select the whole row (or not). This selection is done through JavaScript (JQuery) by setting a class attribute on the row.

function SelectRow(pRowID)
{
    $("#"+pRowID).toggleClass("selected");
}

Next step, I want to loop through all selected rows of the table (to extract data from it). Apperently, when I want to loop through the table, there are no rows with the class attribute "selected".

    $("table tr.selected").each(function(){
        // get the data
    });

I finally found out what the problem is... obviously the JQuery script does not work on IE6. Problem is that IE6 is the only browser we have within the company, so it HAS to work on that one. No other browsers are allowed to be installed (that's why it took so long to found out the problem).

So if anyone has a solution to make this work on IE6, I'd be greatly thankfull.

Thanks

Answer 1

This code is working properly. Please have a look if this can help you.

The script is simple by clicking on td you can select row and clicking on Down and Up buttons you can transfer rows from upper table to lower and vice versa.

HTML:

<style type="text/css">
    .selected{background-color:#ffeeee;color:#aaf;}
table{border-collapse:collapse;border:1px solid blue;width:200px;margin:5px;}
tr{background-color:#eeffee;color:ddaada;}
    span{border:1px solid #CC3300;background-color:#CC9900;color:#CC3300;
                   margin:5px;}
</style>

<table id="upper">
    <tr><td>1</td><td>This</td><td>is</td><td>first</td><td>row</td></tr>
    <tr><td>2</td><td>This</td><td>is</td><td>second</td><td>row</td></tr>
    <tr><td>3</td><td>This</td><td>is</td><td>third</td><td>row</td></tr>
    <tr><td>4</td><td>This</td><td>is</td><td>fourth</td><td>row</td></tr>
    <tr><td>5</td><td>This</td><td>is</td><td>fifth</td><td>row</td></tr>
</table>

<span id="btnUp">Down</span>&nbsp;&nbsp;<span id="btnDown">Up</span>

<table id="lower">
    <tr><td>A</td><td>This</td><td>is</td><td>1</td><td>row</td></tr>
</table>

SCRIPT:

<script type="text/javascript">
    $(document).ready(function(){
        $("table tr td").click(function(){
            $(this).parent().toggleClass("selected");
        });
        $("#btnUp").click(function(){
            var tl=$("table#lower");
            var tu=$("table#upper");      
            $("tr.selected", tu).each(function(){
                $(tl).append($(this).removeClass("selected"));
            });
        });
        $("#btnDown").click(function(){
            var tl=$("table#lower");
            var tu=$("table#upper");
            $("tr.selected", tl).each(function(){
                $(tu).append($(this).removeClass("selected"));
            });
        });
    });
</script>