Question

我有很多这样的行：

<tr>        
    <TD class="Lo">90%</TD>                        
    <TD class="Poor">80%</TD>                   
    <TD class="Lo">89%</TD>                     
    <TD class="Mid">85%</TD>                        
    <TD class="Poor">85%</TD>                       
    <TD class="Mid">85%</TD>                        
    <TD class="Hi">85%</TD>
</tr>

现在我想访问此行中的任何元素，并根据值设置该行的颜色：

如果80％＆lt;值＆lt; = 85％颜色为黄色，
如果90％＆lt;值＆lt; = 95％颜色为红色，
如果95％＆lt;值＆lt; = 100％颜色为绿色。

如何使用jQuery执行此操作？

Answer 1

你可能会为此做一些custom selectors。

例如，这里有一个叫做“高”的人：

jQuery.expr[':'].high = '(put your boolean logic here, inside quotes)';

然后，在获得自定义选择器后，为每个选择器执行此操作：

$('td:high').css('color', 'green');

Answer 2

尝试这样的事情

$("td").each(function() {
  if ($(this).text().replace('%') <= 90) {
    $(this).css('background','red');
  } else if ($(this).text().replace('%') <= 100) {
    $(this).css('background','green');
  }
  // repeat ...
});

Answer 3

这是一个有效的解决方案，并在客户端完成了突出显示逻辑。

给定带有id =“stats”的html表，这意味着将对该表的td应用高亮显示。

<table id="stats">
    <tr>
        <td>83%</td>                                           
        <td>96%</td>
        <td>92%</td>
    </tr>
    <tr>
        <td>100%</td>                                           
        <td>94%</td>                                  
        <td>85%</td>                                            
    </tr>
</table>

Javascript与JQuery一起执行亮点。

<script type="text/javascript">
    $(window).ready(function() {
        // for each td element within elements whose id="stats" 
        $("#stats td").each(function() {
            // current td element
            var td = $(this);
            // do it once only
            var val = td.text().replace('%', '');

            td.css('background',  val > 80 && val <= 85    ? 'yellow' 
                                  : val > 90 && val <= 95  ? 'red'
                                  : val > 95 && val <= 100 ? 'green'
                                  : 'black'); // black is default
        });

    }); 
</script>

在Jquery中访问数组元素

3 个答案: