CODEWITHSUNDEEP
javascripthtml
Koshila Dodantenna
Koshila Dodantenna

Reputation: 41

Add "bg-.." classes to dynamically build table rows depending on cell values

This is the table I have created so far:

This is the table I have created so far

I need to change the classes of the rows, depending on the values on a cell.

For example, if a row contains the text Level 1 on the Bonus column, then the whole row should be of class "bg-info".

And if a row contains the text Level 2 on the Bonus column, then the whole row should be of class "bg-warning".

I have tried changing the colours of the rows, but couldn't apply the background colour classes onto the <tr>.

Here's my code so far:

<html>
<head>
    <title>Dkin Pizza Shops</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
        crossorigin="anonymous"
    >

    <script type="text/javascript" src="storeData.js"></script>

    <script>
        function buildTable() 
        {
            let outputText = '';    

            for (var i = 0; i < storeData.length; i++) 
            {
                let store = storeData[i];

                outputText += "<tr>";
                outputText += "<td>" + store.city + "</td>";
                outputText += "<td>" + store.postcode + "</td>";
                outputText += "<td>" + findState(store.postcode) + "</td>";
                outputText += "<td>" + store.manager + "</td>";
                outputText += "<td>" + store.sales + "</td>";
                outputText += "<td>" + findBonus(store.sales) + "</td>";
                outputText += "<tr>"
            }

     
            document.getElementById("tableBody").innerHTML = outputText;
            return;
        }
        function findState(postcode)
        {
            var postcode = parseInt(postcode,10);

            if((postcode>=2000 && postcode<=2599)|| (postcode>=2619 && postcode<=2898) || (postcode>=2921 && postcode<=2999))
            {return "NSW";}
            else if((postcode>=2600 && postcode<=2618)|| (postcode>=2900 && postcode<=2920))
            {return "ACT";}
            else if((postcode>=3000 && postcode<=3999))
            {return "VIC";}
            else if((postcode>=4000 && postcode<=4999))
            {return "QLD";}
            else if((postcode>=5000 && postcode<=5799))
            {return "SA";}
            else if((postcode>=6000 && postcode<=6797))
            {return "WA";}
            else if((postcode>=7000 && postcode<=7799))
            {return "TAS";}
            else if((postcode>=0800 && postcode<=0899))
            {return "NT";}

            return '';

        }

        function findBonus(sales)
        {
            var sales = parseInt(sales,10);

            if(sales>=2500 && sales<=5499)
            {return "Level 1"}
            else if(sales>=5500)
            {return "Level 2"}

            return '';
        }
    </script>

</head>
<body>
    <div class="container">
        <h1>Shop Sales</h1>
        <h3>Total sales by shop for June 2015</h3>
        
        <table class="table table-sm" id="shops">
            <thead>
               <tr>
                  <th>City</th>
                  <th>Postcode</th>
                  <th>State</th>
                  <th>Manager</th>
                  <th>Sold</th>
                  <th>Bonus</th>
               </tr>
            </thead>
            <tbody id="tableBody">
               <tr>
                  <td></td>
               </tr>
            </tbody>
        </table>

        
        <script>buildTable()</script>
        
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
     integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
     crossorigin="anonymous">
    </script>
    <script
     src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
     crossorigin="anonymous">
    </script>

</body>

Upvotes: 0

Views: 47

Answers (1)

Stephen P
Stephen P

Reputation: 14810

If you call findBonus(store.sales) before you add the <tr> to outputText you can include a class="something" with the <tr> tag depending on the value of findBonus.
e.g. bonusLevel = findBonus(store.sales); then add a class (or not) depending on what bonusLevel is and later use bonusLevel in the <td> where you're currently calling findBonus.

function buildTable() 
{
    let outputText = '';    

    for (var i = 0; i < storeData.length; i++) 
    {
        let store = storeData[i];

        let rowClass = '';
        const bonusLevel = findBonus(store.sales);
        /*switch (bonusLevel) {
            'Level 1':
                rowClass = 'bg-info';
                break;
            'Level 2':
                rowClass = 'bg-warning';
                break;
        }*/
        if (bonusLevel === 'Level 1') {
            rowClass = 'bg-info';
        }
        else if (bonusLevel === 'Level 2') {
            rowClass = 'bg-warning';
        }

        // If rowClass is not blank add 'class="rowClass"` to the <tr>
        outputText += '<tr' + (rowClass !== '' ? ' class="'+rowClass+'"' : '') + '>';
        outputText += '<td>' + store.city + '</td>';
        outputText += '<td>' + store.postcode + '</td>';
        outputText += '<td>' + findState(store.postcode) + '</td>';
        outputText += '<td>' + store.manager + '</td>';
        outputText += '<td>' + store.sales + '</td>';
        outputText += '<td>' + bonusLevel + '</td>';
        outputText += '<tr>';
    }

    document.getElementById('tableBody').innerHTML = outputText;
    return;
}

I changed the quote used to single ' in place of double " because it makes it easier to use the double-quotes that HTML markup wants; and you should try to be consistent in quoting style.

This could be further cleaned up by using Template literals (which use backticks) such as

...
outputText += `<td>${store.city}</td>`;
...
outputText += `<td>${bonusLevel}</td>`;
...

Upvotes: 1

Related Questions