HTML & JavaScript - 条件格式不起作用答案

【问题标题】：HTML & JavaScript - Conditional formatting is not workingHTML & JavaScript - 条件格式不起作用
【发布时间】：2019-07-18 10:45:55
【问题描述】：

我正在尝试使用 JavaScript 和 HTML 创建一些条件格式。

基本上我有一个包含以下字段的表格：

table
system
timestamp
total_amount
amount_used
amount_free

我想要根据列amount_free的值来改变字段的颜色。

在这种情况下，如果我的 amount_free 列是 0 €，那么我想在我的单元格上显示红色。

为此，我使用以下代码：

$(document).ready(function() {
  $('#table_id td.amount_free').each(function() {
    if ($(this).text() == '0 €') {
      $(this).css('background-color', '#f00');
    }
  });
});

table,
td {
  word-wrap: keep-all;
  border: 1px solid black;
  border-collapse: collapse;
}

table,
th {
  border: 1px solid black;
}

th,
td {
  padding: 3px;
}

,
th {
  text-align: left;
}

,
th {
  background-color: #f2f2f2;
}

,
td {
  font-family: arial;
  font-size: 10pt;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table style=width:100%>
  <tr>
    <th>table</th>
    <th>system</th>
    <th>timestamp</th>
    <th>total_amount</th>
    <th>amount_used</th>
    <th>amount_free</th>
  </tr>
  <tr>
    <td>amount_values</td>
    <td>users</td>
    <td>2019-07-18 00:00:00</td>
    <td>398 €</td>
    <td>179 €</td>
    <td>0 €</td>
  </tr>
</table>

但它不会返回任何颜色。只有表格没有格式化。谁能帮帮我？

【问题讨论】：

请提供格式化代码
选择器'#table_id td.amount_free'没有引用任何元素，所以你的jquery脚本基本上什么都不做
<td> 上也没有类，所以td.amount_free 没有匹配项

标签： javascript jquery html conditional-formatting

【解决方案1】：

$(document).ready(function() {
  $('#table_id .amount_free_value').each(function() {
    const value = $(this).text().split('€')[0];
    if (value == 0) {
      $(this).css('background-color', '#f00');
    }
  });
});

table,
td {
  word-wrap: keep-all;
  border: 1px solid black;
  border-collapse: collapse;
}

table,
th {
  border: 1px solid black;
}

th,
td {
  padding: 3px;
}

,
th {
  text-align: left;
}

,
th {
  background-color: #f2f2f2;
}

,
td {
  font-family: arial;
  font-size: 10pt;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table style="width:100%" id="table_id">
  <tr>
    <th>table</th>
    <th>system</th>
    <th>timestamp</th>
    <th>total_amount</th>
    <th>amount_used</th>
    <th>amount_free</th>
  </tr>
  <tr>
    <td>amount_values</td>
    <td>users</td>
    <td>2019-07-18 00:00:00</td>
    <td>398 €</td>
    <td>179 €</td>
    <td class="amount_free_value">0 €</td>
  </tr>
</table>

您要检查的内容有些错误，您在文本字符串中有货币。您没有表的 id，也没有表中 amount_free 值的类或某些属性。

你可以这样做。

【讨论】：

【解决方案2】：

您的代码（样式部分）中有一些拼写错误，您的表格也缺少 ID 属性，并且没有带有 amount_free 类的 TD。

尝试：

<head>
<script type='text/javascript'>
    $(document).ready(function(){
        $('#table_id td.amount_free').each(function(){
            if ($(this).text() == '0 €') {
                $(this).css('background-color','#f00');
            }
        });
     });
</script>
</head>
<br><br>
<style>
table, td {
    word-wrap: keep-all;
    border: 1px solid black;
    border-collapse: collapse;
}
table, th { 
    border: 1px solid black;
}
th, td {
    padding: 3px;
}
th {
    text-align: left;
}
th {
    background-color: #f2f2f2;
}
td{
    font-family: arial;
    font-size: 10pt;
}
</style>
    <table style=width:100% id="table_id">
        <tr>
            <th>table</th>
            <th>system</th>
            <th>timestamp</th>
            <th>total_amount</th>
            <th>amount_used</th>
            <th>amount_free</th>
        </tr>
        <tr>
            <td>amount_values</td>
            <td>users</td>
            <td>2019-07-18 00:00:00</td>
            <td>398 €</td>
            <td>179 €</td>
            <td class="amount_free">0 €</td>
        </tr>
  </table>

【讨论】：

【解决方案3】：

您需要为您的示例中的table 标记提供id 并为您的特定td 标记提供class 名称。所以你的 html 代码如下所示：

 <!–– add id to table ––> 
<table id="table_id" style=width:100%>
  <tr>
    <th>table</th>
    <th>system</th>
    <th>timestamp</th>
    <th>total_amount</th>
    <th>amount_used</th>
    <th>amount_free</th>
  </tr>
  <tr>
    <td>amount_values</td>
    <td>users</td>
    <td>2019-07-18 00:00:00</td>
    <td>398 €</td>
    <td>179 €</td>
    <!–– add class to td ––> 
    <td class="amount_free">0 €</td>
  </tr>
</table>

【讨论】：

【解决方案4】：

您正在检查一个不存在的 ID 为 table_id 的表。您正在进一步检查一个不存在的 amount_free 类的 td 元素。

如果您添加 ID 和类，那么它将起作用。

$(document).ready(function() {
  $('#table_id td.amount_free').each(function() {
    if ($(this).text() == '0 €') {
      $(this).css('background-color', '#f00');
    }
  });
});

table,
td {
  word-wrap: keep-all;
  border: 1px solid black;
  border-collapse: collapse;
}

table,
th {
  border: 1px solid black;
}

th,
td {
  padding: 3px;
}

,
th {
  text-align: left;
}

,
th {
  background-color: #f2f2f2;
}

,
td {
  font-family: arial;
  font-size: 10pt;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table style="width:100%" id="table_id">
  <tr>
    <th>table</th>
    <th>system</th>
    <th>timestamp</th>
    <th>total_amount</th>
    <th>amount_used</th>
    <th>amount_free</th>
  </tr>
  <tr>
    <td>amount_values</td>
    <td>users</td>
    <td>2019-07-18 00:00:00</td>
    <td>398 €</td>
    <td>179 €</td>
    <td class="amount_free">0 €</td>
  </tr>
</table>

【讨论】：