如果值超过10,000,则更改td颜色

时间:2019-02-28 10:05:31

标签: javascript jquery html html-table css-selectors

我正在做CS50财务练习,并且试图显示某人是否通过其股票获利。最初,您将获得10000现金。我正在尝试显示投资组合的总价值(HTML代码的结尾)何时超过10000美元。我已经编写了以下代码,但是尚无法正常工作,希望您能为我提供帮助。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#table_id td.color').each(function() {
      if ($(this).val() > 10000) {
        $(this).css('color', '#2e944b');
      }
    });
  });
</script>
<table class="table" id="table_id">
  <tr>
    <th></th>
    <th>User ID</th>
    <th>Stock</th>
    <th>Company Name</th>
    <th>Amount</th>
    <th>Current Price</th>
    <th>Holdings</th>
  </tr>
  {% for port in portfolio %}
  <tr>
    <td></td>
    <td>{{port.id}}</td>
    <td>{{port.stocks}}</td>
    <td>{{lookup(port.stocks)['name']}}</td>
    <td>{{port.amount}}</td>
    <td>{{usd(lookup(port.stocks)['price'])}}</td>
    <td>{{usd(lookup(port.stocks)['price']*port.amount)}}</td>
  </tr>
  {% endfor %}
  <tr>
    <td><b>Cash</b></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>{{ usd(cash) }}</td>
  </tr>
  <tr>
    <td><b>Total</b></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="color">{{ usd(grand_tot) }}</td>
  </tr>
</table>

Output value screenshot

4 个答案:

答案 0 :(得分:2)

您正在通过执行td检查if ($(this).val() > 1000) {的值。但是td没有值,它里面有一个文本。因此,您需要检查.text()方法,而不是.val()方法。

$('#table_id td.color').each(function(){
    if ($(this).text() > 1000) {
        $(this).css('color','#2e944b');
    }
});

答案 1 :(得分:2)

首先请注意,jQuery 1.4.4非常过时。您应该至少使用1.12.1,最好使用3.3.1(在提出此问题时)。

您的逻辑的主要问题是,您在val()元素上使用td,而该元素没有值。您需要检查text()。根据文本的格式,您还需要在进行比较之前从其中删除$,字符。

还要注意,将类应用于元素以设置其样式以保持关注点分离是一种更好的做法。这样,您可以使用addClass(),并且可以为该方法调用提供一个函数,以根据单元格中的文本确定是否应添加类。

最后请注意,问题指出“超过10,000”,但是您的代码正在检查超过1,000。无论哪种方式,这都是逻辑上的简单更改。试试这个:

$(document).ready(function() {
  $('#table_id td.color').addClass(function() {
    var total = $(this).text().replace(/[$,]/g, '');
    return parseInt(total, 10) > 10000 ? 'foo' : null;
  });
});
.foo {
  color: #2E944B;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="table_id">
  <tr>
    <th></th>
    <th>User ID</th>
    <th>Stock</th>
    <th>Company Name</th>
    <th>Amount</th>
    <th>Current Price</th>
    <th>Holdings</th>
  </tr>
  <tr>
    <td><b>Total</b></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="color">$101</td>
  </tr>
  <tr>
    <td><b>Total</b></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="color">$1,001</td>
  </tr>
  <tr>
    <td><b>Total</b></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="color">$10,001</td>
  </tr>
  <tr>
    <td><b>Total</b></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="color">$100,001</td>
  </tr>
</table>

答案 2 :(得分:0)

考虑值始终为Integer

,这应该可以工作

val()方法仅适用于输入字段,要获取<td>的内部html,您需要使用text()

$(document).ready(function(){
    $('#table_id td.color').each(function(){
        if (parseInt($(this).text()) > 1000) {
            $(this).css('color','#2e944b');
        }
    });
});

答案 3 :(得分:0)

问题是<cdk-virtual-scroll-viewport [itemSize]="20"$(this).val()标签没有<td>

val()