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?
 
Chris StanyonCommented:
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
 
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 StanyonCommented:
Yeah - you can. Just add it to the end of your custom.css file and it should work fine
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy 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 StanyonCommented:
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 StanyonCommented:
No worries. Glad it's working :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.