テーブル行のouputを要素ハイライト整合素子

Question

からのjQuery ビクターとスティーブを強調表示する方法....（及び#outputから他の変更である場合）

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'); 
     } 
    }); 
}); 

JSFiddle

Answer 1

あなたはこれにあなたのjQueryを変更した場合：それを解決する必要があること

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'); 
     } 
    }); 
}); 

。

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

 
$(document).ready(function(){ 
 
    $('table tr').each(function(){ 
 
    \t \t var getName = $(this).find('td').eq(1).text(); 
 
    \t \t if (jQuery.inArray(getName, gg) !== -1) { 
 
     \t $(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>

これは、名前の配列にgg変数に変換され、名前が配列である場合、各関数の内部で我々はチェックしています。

Answer 2

あなたはを使用することができますは、文字列にサブ文字列が含まれているかどうかを確認します。

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>

Answer 3

"機能的" なスタイルソリューション

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