Question

如何突出显示维克多和史蒂夫....（以及其他#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

您可以使用includes()检查字符串是否包含子字符串。

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 2

如果您将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');
        }
    });
});

那应该解决它。

＆＃13;

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

＆＃13;

<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>

＆＃13;

这是将gg变量转换为名称数组，然后在每个函数内部检查名称是否在数组中。

Answer 3

A＆＃34;功能性＆＃34;风格解决方案

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

来自ouput元素的Jquery突出显示表行中的匹配元素

3 个答案: