CODEWITHSUNDEEP
javascripthtml
QWERTY
QWERTY

Reputation: 2315

JavaScript customize text from dynamically created table

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?

Upvotes: 0

Views: 53

Answers (1)

Muhammet Can TONBUL
Muhammet Can TONBUL

Reputation: 3538

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)');

            }
        });

Upvotes: 1

Related Questions