Петля через выбранные строки таблицы с JavaScript

Question

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

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

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

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

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

Итак, если у кого-то есть решение сделать эту работу на IE6, я был бы очень благодарен.

Answer 1

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

Сценарий просто нажав на TD вы можете выбрать строку и нажав на вниз и Up кнопок, которые можно передавать строки из верхней таблицы опустить, и наоборот.

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>