Formating the resulting table if a cell in a column has specific text

Not sure where to begin, I am using a CSV to Html table template by Derek Eder https://github.com/derekeder/csv-to-html-table.
Chris Stanyon pointed out that it appears to be using the DataTable plugin on a previous related question of mine
Is there a way to format the table so a if column 5 has CANCELED anywhere in it it makes the entire row black with white text
I don't have any experience in javascript as is apparent from my previous question so any help would be greatly appreciated.
LVL 1
csePixelatedAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
Hi again,

As with the previous answer, it's all about the DataTables plugin. The plugin has an option to call a function when each row is created so you can leverage it to check the value in a given column and act accordingly. Add the call back function to the DataTables options:

<script>
  CsvToHtmlTable.init({
    csv_path: 'yourData.csv', 
    element: 'table-container', 
    allow_download: true,
    csv_options: {separator: ',', delimiter: '"'},
    datatables_options: {
        "paging": false,
        "order": [[ 3, "desc" ]],
        "createdRow": function( row, data, dataIndex) {
            if (data[4].includes("CANCELED")) {
                $(row).addClass('hilite');
            }
        }
    }
  });
</script>

Open in new window

That will now add a class of hilite to each row that contains CANCELED in the 5th column so you can use your CSS to style it:

.hilite { background-color:black !important; color: white !important; }
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
csePixelatedAuthor Commented:
Can i just append ".hilite { background-color:black !important; color: white !important; }" at the end of the ccs file, or is there a specific place i must add it, my apologies i don't even dabble with this stuff normally, inn the css folder is , bootstrap.css.map , bootstrap.min.css , custom.css & , dataTables.bootstrap.css
0
Chris StanyonWebDevCommented:
Yeah - you can. Just add it to the end of your custom.css file and it should work fine
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

csePixelatedAuthor Commented:
It does not appear to be working, This time i checked that i was looking in the correct windows and modifying the correct files...
0
Chris StanyonWebDevCommented:
Can't really help you wthout seeing the page. I know for a fact the code I posted does work, so maybe there's something else going on. Post a link and I'll take a look
0
csePixelatedAuthor Commented:
Here is the custom.css file after i made some color modifications
custom.css
0
csePixelatedAuthor Commented:
I was sorting the wrong column as well thank you Chris
0
Chris StanyonWebDevCommented:
No worries. Glad it's working :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.