Изменение цвета td, если его значение превышает 10000

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

Во-первых, обратите внимание, что jQuery 1.4.4 очень устарел.Вы должны использовать как минимум 1.12.1, в идеале 3.3.1 (на момент этого вопроса).

Основная проблема с вашей логикой заключается в том, что вы используете val() для элемента td, которыйне имеет значения.Вы должны проверить text() вместо этого.Учитывая форматирование текста, вам также необходимо удалить из него символы $ и , перед выполнением сравнения.

Также обратите внимание, что лучше применять классы к элементам для их стилизации, чтобыподдерживать разделение проблем.Таким образом, вы можете использовать addClass(), и вы можете предоставить функцию для вызова этого метода, чтобы определить, должен ли класс быть добавлен или нет на основе текста в ячейке.

Наконец, обратите внимание, что в вопросе указано «более 10000», но ваш код проверяет более 1000.В любом случае, это простое изменение в логике.Попробуйте это:

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

Answer 2

Это должно работать, учитывая, что значение всегда Integer

val() метод работает только для полей ввода, чтобы получить внутренний html-код <td>, вам нужно использовать 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

Вы проверяете значение td, делая if ($(this).val() > 1000) {.Но td не имеет значения, в нем есть текст.Поэтому вам необходимо проверить метод .text(), а не метод .val().

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