CODEWITHSUNDEEP
javascriptjquery
10tribu
10tribu

Reputation: 3

Jquery from ouput element highlight matching element in table row

How to highlight Victor and Steve....(and other from #output if is change)

Html

<div id="output">Victor,Steve</div>
<table border="0">
    <tr><td>id</td><td>name</td><td>age</td></tr>
    <tr><td>1</td><td>Victor</td><td>14</td></tr>
    <tr><td>2</td><td>John</td><td>15</td></tr>
    <tr><td>3</td><td>Steve</td><td>16</td></tr>
    <tr><td>7</td><td>Michael</td><td>17</td></tr>
    <tr><td>9</td><td>Michaela</td><td>20</td></tr>
</table>

jquery

var gg = $('#output').text();
$(document).ready(function(){
    $('table tr').each(function(){
        if($(this).find('td').eq(1).text() == gg){
            $(this).css('background','red');
        }
    });
});

here the JSFiddle

Upvotes: 0

Views: 37

Answers (3)

Daniela Mogini
Daniela Mogini

Reputation: 539

A "functional" style solution

var gg = $('#output').text()
$(document).ready(function(){
    $('table tr').css('background', function(){
      return (gg.indexOf($(this).find('td').eq(1).text())>=0 )? 'red' : 'transparent';
    })
});

Upvotes: 0

user9019817
user9019817

Reputation:

If you change your jQuery to this:

var gg = $('#output').text().split(',');

$(document).ready(function(){
    $('table tr').each(function(){
            var getName = $(this).find('td').eq(1).text();
            if (jQuery.inArray(getName, gg) !== -1) {
            $(this).css('background','red');
        }
    });
});

That should solve it.

var gg = $('#output').text().split(',');

$(document).ready(function(){
    $('table tr').each(function(){
    		var getName = $(this).find('td').eq(1).text();
    		if (jQuery.inArray(getName, gg) !== -1) {
        	$(this).css('background','red');
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">Victor,Steve</div>
<table border="0">
    <tr><td>id</td><td>name</td><td>age</td></tr>
    <tr><td>1</td><td>Victor</td><td>14</td></tr>
    <tr><td>2</td><td>John</td><td>15</td></tr>
    <tr><td>3</td><td>Steve</td><td>16</td></tr>
    <tr><td>7</td><td>Michael</td><td>17</td></tr>
    <tr><td>9</td><td>Michaela</td><td>20</td></tr>
</table>

This is converting the gg variable into an array of names and then inside the each function we're checking if the name is in the array.

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122037

You can use includes() to check if string contains sub-string.

var gg = $('#output').text();

$('table tr').each(function() {
  if (gg.includes($(this).find('td').eq(1).text())) {
    $(this).css('background', 'red');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">Victor,Steve</div>
<table border="0">
  <tr>
    <td>id</td>
    <td>name</td>
    <td>age</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Victor</td>
    <td>14</td>
  </tr>
  <tr>
    <td>2</td>
    <td>John</td>
    <td>15</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Steve</td>
    <td>16</td>
  </tr>
  <tr>
    <td>7</td>
    <td>Michael</td>
    <td>17</td>
  </tr>
  <tr>
    <td>9</td>
    <td>Michaela</td>
    <td>20</td>
  </tr>
</table>

Upvotes: 1

Related Questions