JavaScript customize text from dynamically created table

Question

I was having some problem when trying to dynamically add a table to HTML using JavaScript.

I got an array and my sample data is [0,0,5,2,7,5,4,5,0]

My HTML:

<div id="ftw" style="min-width:80px; overflow:auto; overflow-x:hidden; overflow-y:hidden; display:none;">
    <table id="ft" class="table" style="font-size:13.5px">

    </table>
</div>

My JavaScript:

document.getElementById('ftw').style.display = 'block';
        var table = document.getElementById("ft");

        // helper function        
        function addCell(tr, text) {
            var td = tr.insertCell();
            td.textContent = text;
            return td;
        }

I wanted to do something like when the item == 0 , then I set the font to red color. If item > 0 , I wanted to bold the item .

Any ideas how can I achieve this?

Answer 1

Here the JsFiddle ..

I change td.textContent to td.innerHTML and add row.style.color="red"; addCell(row, 'Every <b>' + item + '</b> day(s)');

 function addCell(tr, text) {
            var td = tr.insertCell();
            td.innerHTML = text;
            return td;
        }



dataset.forEach(function (item) {
            var row = table.insertRow();
            if(item == 0){
            row.style.color="red";
                addCell(row, 'No record');
            }else{  
                addCell(row, 'Every <b>' + item + '</b> day(s)');

            }
        });