javascript - 显示复选标记和十字而不是 bool 值 TRUE 和 False？

Question

我有一个 Django/MySQl/bootsrap 网站，其中我的 View 显示一些 bool 列值。有没有办法显示复选标记和十字标记而不是显示 TRUE 或 False？它可以是 .svg 文件，也可以是复选标记和十字的 HTML 代码。周围有聪明人也做过同样的事吗？

这是我的代码:

<tr class="table_content">
    <td>{{ sku.sku }}</td>
    <td>{{ sku.gsa }}</td>
    <td>{{ sku.service_category }}</td>
    <td>{{ sku.product_category }}</td>
    <td>{{ sku.product_description }}</td>
    <td>{{ sku.unit }}</td>
    <td>${{ sku.msrp }}</td>
    <td>${{ sku.channel_price }}</td>
    <td>{{ sku.volume_pricing }}</td>
    <td>{{ sku.comments_sku_description }}</td>
    <td>{{ sku.new_sku }}</td>
    <td>{{ sku.price_requested }}</td>
    <td>{{ sku.to_be_retired }}</td>
</tr>

最后 3 个返回 bool 值。我正在尝试显示复选标记和十字的 .svg 文件或简单的复选标记和十字的 html 代码。

Answer 1

在 html 上，您可以使用此 unicode 格式的刻度符号 ✔ 结果 ✔

您还可以在此 html 格式中使用倍数符号 × 结果×

<小时/>

引用:

Tick symbol in HTML/XHTML

What is the proper HTML entity for the "x" in a dimension?

<小时/>

编辑

选项 1 - 有效，但不建议这样做

如果{{变量}}返回TRUE或FALSE你可以用javascript检查它

<td>
    <script type="text/javascript">
        if( "{{ variable }}" === "FALSE" ) {
            document.write("×");
        } else {
            document.write("✔");
        }
    </script>
</td>

不建议使用上述选项。如果您以错误的方式使用它，将会产生问题和安全漏洞(至少会转义您的字符串)。

选项 2 - 在本例中更好(建议)

在 Django 模板中，检查 true 或 false

<td>{% if variable == True %}&#10004;{% else %}&times;{% endif %}</td>

<小时/>

有关更多精美图标，请查看FontAwesome

<小时/>

编辑2:

对于真/假变量，还请检查 tuky's answer ，这是一个更清洁的解决方案。