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

Question

我正在做 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>

Answer 1

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

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

Answer 2

考虑到值始终是Integer，这应该可以工作

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

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

Answer 3

问题是$(this).val()。 <td> 标签没有 val()

<style></style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>
  $(document).ready(function(){
    $('#table_id td.color').each(function(){        
        if ($(this).html() > 1000) {
            $(this).css('color','#2e944b');
        }
    });
});
</script>
  <table class="table" id="table_id" >
    <tr>
      <th></th>
      <th>User ID</th>
      <th>Holdings</th>
    </tr>
    <tr>
      <td><b>Total</b></td>
      <td></td>
      <td class="color">900</td>
    </tr>
    <tr>
      <td><b>Total</b></td>
      <td></td>
      <td class="color">1001</td>
    </tr>
  </table>

Answer 4

首先请注意，jQuery 1.4.4 已经过时了。您应该至少使用 1.12.1，最好是 3.3.1（在提出这个问题时）。

您的逻辑的主要问题是您在没有值的td 元素上使用val()。您需要改为检查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>