Перебирать выбранные строки таблицы с помощью JavaScript

Question

У меня есть таблица, содержащая флажок, чтобы выбрать всю строку (или нет). Этот выбор выполняется с помощью JavaScript (JQuery) путем установки атрибута класса в строке.

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

Следующим шагом я хочу перебрать все выбранные строки таблицы (чтобы извлечь из нее данные). По-видимому, когда я хочу пройтись по таблице, нет строк с атрибутом класса «выделено».

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

Наконец-то я выяснил, в чем проблема ... очевидно, что скрипт JQuery не работает в IE6. Проблема в том, что IE6 - единственный браузер, который у нас есть в компании, поэтому он должен работать над этим Никакие другие браузеры не могут быть установлены (вот почему потребовалось так много времени, чтобы выяснить проблему).

Так что, если у кого-то есть решение, позволяющее сделать это на IE6, я был бы очень благодарен.

Answer 1

Этот код работает правильно. Пожалуйста, посмотрите, может ли это вам помочь.

Сценарий прост, нажав на td, вы можете выбрать строку и нажав кнопки Вниз и Вверх , чтобы перенести строки из верхней таблицы в нижнюю и наоборот.

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>