jQuery matching table with array

Question

Here is part of my table

<table>
  <tr>
    <td>jack</td>
    <td>20</td>
    <td>450</td>
  </tr>
  <tr>
    <td>james</td>
    <td>20</td>
    <td>450</td>
  </tr>
  <tr>
    <td>john</td>
    <td>20</td>
    <td>450</td>
  </tr>
</table>

My jQuery code looks like this

var toShow = [
  "jack",
  "john"
];

var addClass = [
  "jack"
];


$('tr:contains(toShow)').remove();
$('tr:contains(addClass)').addClass("done");

The goal is compare toShow array with my table. If string doesn't not exist, remove tr element with it. If my table matches item from addClass than add class.

Im not sure why my code do not works. Result shoud be remove last tr element from table and for first add class .done

$('tr:contains(xxxx)') does not pass the var to the contains you need to use quotes and likely loop too. JS does not work by wishful thinking. See the documentation — mplungjan
– mplungjan, Commented Oct 25, 2016 at 11:33
I wonder why run remove to values inside toShow array... — DontVoteMeDown
– DontVoteMeDown, Commented Oct 25, 2016 at 11:36
You likely want to change to var addClass = [ "james" ]; if you want to see anything with a "done" class — mplungjan
– mplungjan, Commented Oct 25, 2016 at 11:50

gurvinder372 · Accepted Answer · 2016-10-25 11:49:15Z

2

Try this

var toShow = [
  "jack",
  "john"
];

var addClass = [
  "jack"
];

toShow.forEach( function(item){
  $('tr:contains(' + item + ')').remove();
});

addClass.forEach( function(item){
   $('tr:contains(' + item + ')').addClass("done");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>jack</td>
    <td>20</td>
    <td>450</td>
  </tr>
  <tr>
    <td>james</td>
    <td>20</td>
    <td>450</td>
  </tr>
  <tr>
    <td>john</td>
    <td>20</td>
    <td>450</td>
  </tr>
</table>

Since the addClass array item has been deleted from the DOM already, you don't see any class being added.

edited Oct 25, 2016 at 11:49

answered Oct 25, 2016 at 11:35

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gurvinder372 Over a year ago

@mplungjan it doesn't add since jack element has already been deleted based on toShow array

gurvinder372 Over a year ago

@mplungjan If i change the item to james, then it works.

mplungjan Over a year ago

yes, I could not imagine removing stuff later to have a class added

T.J. Crowder · Accepted Answer · 2016-10-25 11:35:58Z

1

Im not sure why my code do not works.

Because you're literally asking it to find the text toShow, you're not using a value from your toShow object.

To do that, if you want to use :contains, use string concatenation; to do all values, you'll need to use a multiple selector.

$('tr:contains(' + toShow.join('), tr:contains(') + ')').remove();

...which creates this selector string with your example:

$('tr:contains(jack), tr:contains(john)').remove();

Or of course, loop through the array and handle each entry individually, again with string concatenation.

answered Oct 25, 2016 at 11:35

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

2 Comments

Ostrov Over a year ago

Thanks, but it makes oposite what I want. I wanted to show only contains of toShow array.

T.J. Crowder Over a year ago

@Ostrov: It's hard to read $('tr:contains(toShow)').remove(); as meaning anything other than "remove the elements that contain what's in toShow". But just adjust the logic however you want, the fundamental thing is doing the string concatenation.

Collectives™ on Stack Overflow

jQuery matching table with array

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related