Выделите элементы таблицы с полем выбора - JQuery

Question

Я хочу покрасить все элементы, разделяющие те же 3 значения данных, что и выбранный элемент, с помощью окна выбора. Он работает только с первым выбором, но не с одновременными. В моей петле for консоль не показывает, что я ожидаю от нее? Я должен упустить что-то, что привыкло к самому JQuery.

Вот JS:

function setColor(){ 
     $('input').on('click', function(){ 
     var src, // packet source 
      dst, 
      proto;// 

     var $selectedRow = $("tr[class='selectedrow']"); // get selected row 

      color = $(this).val(); // grab selected color from radio button 
      console.log(color); 


     $tdelements = $selectedRow.children(); //get td elements of selected row 
     src = $tdelements.eq(2).text(); // grab source 
     dst = $tdelements.eq(3).text(); // grab destination 
     proto = $tdelements.eq(4).text(); // grab protocol 

      var $tr = $('tr'); // grab entire <tr> of document. 

      console.log($tr.eq(0).children()); 

      // loop through individual <tr> elements and compare fields with the filter. 
      for(var i=0; i < $tr.length; i++){ 
       $tdelements = $tr.eq(i).children(); // grab elements of the ith tr element 
       console.log($tdelements.eq(i)); 
       if($tdelements.eq(2).text() === src && $tdelements.eq(3).text() === dst && $tdelements.eq(4).text() === proto){ 
        $tr.eq(i).removeClass(color); 
        $tr.eq(i).addClass(color); 
       } 
      } 
     }); 

} 




// Dom Ready 
$(document).ready(function(){ 
    $('tbody').on('click', 'tr', function(){ 
     $('tr').removeClass('selectedrow'); 
     $(this).addClass('selectedrow') ; 
    }); 
    setColor(); 
}); 

Вот скрипку: https://jsfiddle.net/senpaifiddler/ztd1Ltux/

Answer 1

Вы можете получить выбранную строку с помощью var $selectedRow = $("tr.selectedrow").

Вы должны удалить ранее примененные классы с использованием

$tr.removeClass('red') 
    .removeClass('green') 
    .removeClass('blue') 
    .removeClass('yellow'); 

И нам не нужно removeClass перед добавлением того же класса на любом элементе. Вот почему я обновил

$tr.eq(i).removeClass(color); 
$tr.eq(i).addClass(color); 

в

$(this).addClass(color); 

где this ваш текущий элемент в цикле $.each.

Кроме того, я изменил код для итеративного <tr> с с использованием $.each.

Кроме того, я добавил <label> для радио для упрощения выбора.

Update: Выдает код

1. $("tr[class='selectedrow']"): Он выбирает элементы, имеющие только класс 'selectedrow', который отлично работает в первом запуске. Впоследствии, когда вы добавляете новый класс, скажем, «красный», ваш класс selectedrow теперь становится selectedrow red. Он может быть получен $("tr[class='selectedrow red']").
2. $tr.eq(i).removeClass(color); $tr.eq(i).addClass(color);
   В первом запуске, предположим, вы выбрали «красный» цвет, он добавит класс «красный». Впоследствии вы выбрали «зеленый», что бы он сделал, он удалит «зеленый» класс с $(tr).eq(i), а затем добавит «зеленый» класс. Но ваш selectedrow содержит «красный» класс. Как удалить ранее выбранный цвет («красный»)?

Попробуйте этот фрагмент.

console.clear(); 
 

 
function setColor() { 
 
    $('input').on('click', function() { 
 
    var src, // packet source 
 
     dst, 
 
     proto; // 
 

 
    var $selectedRow = $("tr.selectedrow"); // get selected row 
 

 
    color = $(this).val(); // grab selected color from radio button 
 

 

 
    $tdelements = $selectedRow.children(); //get td elements of selected row 
 
    src = $tdelements.eq(2).text(); // grab source 
 
    dst = $tdelements.eq(3).text(); // grab destination 
 
    proto = $tdelements.eq(4).text(); // grab protocol 
 

 
    var $tr = $('tr'); // grab entire <tr> of document. 
 

 
    $tr.removeClass('red') 
 
     .removeClass('green') 
 
     .removeClass('blue') 
 
     .removeClass('yellow'); 
 

 
    // loop through individual <tr> elements and compare fields with the filter. 
 
    $tr.each(function() { 
 
     $tdelements = $(this).children(); // grab elements of the ith tr element 
 
     if ($tdelements.eq(2).text() === src && $tdelements.eq(3).text() === dst && $tdelements.eq(4).text() === proto) { 
 
     $(this).addClass(color); 
 
     } 
 
    }); 
 

 
    }); 
 

 
} 
 

 
// Dom Ready 
 
$(document).ready(function() { 
 
    $('tbody').on('click', 'tr', function() { 
 
    $('tr').removeClass('selectedrow'); 
 
    $(this).addClass('selectedrow'); 
 
    }); 
 
    setColor(); 
 
});

html, 
 
body, 
 
.container { 
 
    height: 100%; 
 
} 
 
body { 
 
    font-family: verdana; 
 
    font-size: 10px; 
 
} 
 
.container { 
 
    background: #f6f6f6; 
 
} 
 
.selectedrow { 
 
    color: aqua; 
 
    background: white; 
 
} 
 
.red { 
 
    color: red; 
 
    background: white; 
 
} 
 
.green { 
 
    color: green; 
 
    background: white; 
 
} 
 
.yellow { 
 
    color: yellow; 
 
    background: white; 
 
} 
 
.blue { 
 
    color: blue; 
 
    background: white; 
 
} 
 
label { 
 
    display: inline-block!important; 
 
    margin-right: 10px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta name="description" content="JQuery: Highlight table elements with selection box"> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 

 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 

 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
 
    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 

 

 
</head> 
 

 
<body> 
 

 
    <body> 
 
    <div class="container"> 
 
     <table class="table"> 
 
     <tbody> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>src</td> 
 
      <td>dst</td> 
 
      <td>protocol</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>src</td> 
 
      <td>dst</td> 
 
      <td>protocol</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>src</td> 
 
      <td>dst</td> 
 
      <td>protocol</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>src</td> 
 
      <td>dst</td> 
 
      <td>protocol</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>src</td> 
 
      <td>dst</td> 
 
      <td>protocol</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>src</td> 
 
      <td>dst</td> 
 
      <td>protocol</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      </tr> 
 
      <tr> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>src</td> 
 
      <td>dst</td> 
 
      <td>protocol</td> 
 
      <td>data</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
     <div> 
 
     <input type="radio" name="color" id="radRed" value="red"> 
 
     <label for="radRed">Red</label> 
 
     <input type="radio" name="color" id="radBlue" value="blue"> 
 
     <label for="radBlue">Blue</label> 
 
     <input type="radio" name="color" id="radGreen" value="green"> 
 
     <label for="radGreen">Green</label> 
 
     <input type="radio" name="color" id="radYellow" value="yellow"> 
 
     <label for="radYellow">Yellow</label> 
 
     </div> 
 

 
    </div> 
 
    </body> 
 

 
</body> 
 

 
</html>