Question

I am rendering a HTML table through Django. In this table, some of the cells or columns contain “0”‘s as produced by my python code.

Is there any way in HTML to override that cell or column and for it to show instead a blank in the table cell rather than a 0?

I am using jQuery as well, if that helps.

<tr><td> Value</td>

{% for num in list %}
    <td> <b>{{num}}</b>
{% endfor %}</td>
</tr>

Output is a list which contains 3 zero’s…out of which I want two blanked out.

Lets say if I have something being returned that is

0
10
0
20 
0

But want

""
10
""
20
0


    $(".dem").each(function() {
        for ( var i = 0; i<2; i++)
        {
            if ($(this).html() == "0") {
            $(this).html(" ");         
            }
            i = i+1
        }
    });

I did that ^….however it turned all 3 zeros blank…why?
Thanks!

Answer 1

See the last edit for my final answer. I’m leaving the rest in to show how important it is to ask a good question, and to show what was tried, what the input looked like and what the expected output should have been. That would have saved a lot of time.

---

Using jQuery, you can iterate over each table cell, check the value and change what it outputs. I prefer this over changing the actual data. It’s better to leave your data intact and only change the way it is displayed here.

$("#test td").each(function() {
    if ($(this).html() == "0") {
        $(this).html("");
    }
});

You can see it in action here.

Update:

If only some <td>s should be changed, I recommend using a class for those.

$(".noZeroAllowed").each(function() {
    if ($(this).html() == "0") {
        $(this).html("");
    }
});

It works with HTML like this:

<table id="test">
    <tr>
        <td class="noZeroAllowed">10</td>
        <td class="noZeroAllowed">5</td>
        <td>0</td>
        <td>1</td>
    </tr>
    <tr>
        <td class="noZeroAllowed">11</td>
        <td class="noZeroAllowed">0</td>
        <td>9</td>
        <td>7</td>
    </tr>
</table>

Also see the updated fiddle.

Update 2:

If the data is not atomic and the cells have multiple values in them, like this:

<table id="test">
    <tr>
        <td class="noZeroAllowed">10 0 foobar 0</td>
        <td class="noZeroAllowed">5</td>
        <td>0, 0, 0</td>
        <td>1</td>
    </tr>
</table>

Then you need to change the Javascript to use a regular expression instead. The \b means a word boundary. It will not work with decimals like 0.5 though.

$(".noZeroAllowed").each(function() {
    var newStr = $(this).html().replace(/\b0\b/g, "");
    $(this).html(newStr);
});

See the updated fiddle.

Update 3:

This will turn all the zeros inside of <b> tags in the relevant class <td>s into empty strings, but leave the last zero intact.

$(".noZeroAllowed").each(function() {
    var zeros = new Array;
    var b = $(this).find("b");
    for (var i = 0; i < b.length; i++) {
        $(b[i])
        if ($(b[i]).html() == "0") {
            zeros.push(b[i]);
        }
    }
    for (var i = 0; i < zeros.length - 1; i++) {
        $(zeros[i]).html("");
    }
});

See it here.