IskandarG IskandarG - 15 days ago 4
jQuery Question

Highlight table elements with selection box - Jquery

I want to color all elements that share the same 3 data values as the selected element by using a selection box. It only works with the first selection but not on concurrent ones. In my for loop the console does not show what I expect it to do? I must be missing something that is accustomed to Jquery itself.

Here is the 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();
});


Here's a fiddle: https://jsfiddle.net/senpaifiddler/ztd1Ltux/

sam sam
Answer

You can get the selected row using var $selectedRow = $("tr.selectedrow").

You need to remove previously applied classes using

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

And, we don't need removeClass before adding a the same class on any element. That's why I have updated

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

to

$(this).addClass(color);

where this is your current element in the $.each loop.

Also, I have modified the code to iterate <tr>s using $.each.

Also, I have added <label> for the radio's for simplifying the selection.

Update: Issues your code

  1. $("tr[class='selectedrow']"): It selects elements having only 'selectedrow' class which works fine in first run. Afterwards, when you add a new class, lets say 'red', your selectedrow class now becomes selectedrow red. It can be retrieved by $("tr[class='selectedrow red']").
  2. $tr.eq(i).removeClass(color); $tr.eq(i).addClass(color);
    In first run, lets suppose, you have selected 'red' color, it will add class 'red'. Afterwards, you have selected 'green', what it wil do, it will remove 'green' class from $(tr).eq(i) and then add 'green' class. But, your selectedrow contains the 'red' class. How will it remove previously selected color('red')?

Try this snippet.

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>

Comments