<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="static/javascript.js"></script> <!-- took this from https://stackoverflow.com/questions/71301182/creating-a-html-table-with-expandable-collapsible-sections, need to place the Javascript elsewhere --> <div class="table-container"> <div class="results-table"> <table id="myTable" class="table table-striped"> <tr class="header"> <th>IP address</th> <th>VirusTotal</th> <th>AbuseIPDB</th> <th>Domain</th> <th>Registration country</th> <th>Registration date</th> <th>Email security</th> </tr> <tbody> {% for host in hosts %} <tr> <td>{{host.host}}</td> <td>Score: {{host.vt['vendors_malicious']}} / {{host.vt['vendors_total']}}<br> Last updated: {{host.vt['last_update']}}</td> <td>Score: {{host.abuseipdb['data']['abuseConfidenceScore']}} Last reported: {{host.abuseipdb['data']['lastReportedAt']}}</td> <td>{{host.domain}}</td> <td>{{host.metadata['registrar_country']}}</td> <td>{{host.metadata['creation_date']}}</td> <td>SPF: {{host.emailsec[0]}}, DMARC: {{host.emailsec[1]}}</td> </tr> <tr> <td colspan="7" id="info"> <p> Vendor marked this host as malicious or suspicious: {% for key, value in host.vt['all_vendors'].items() if value['category'] in ['malicious', 'suspicious'] %} {{key}} {% endfor %} </p> </td> </tr> {% endfor %} </tbody> </table> </div> </div> {# {% include "test-table.html" %} #} <!-- important to know: uncommenting the line above makes the red/green JavaScript not work anymore, BUT makes the collapsible table row table work! Go figure it out XD --> {% block scripts %} {#{% for host in hosts %}#} {#whoopsie = JSON.parse({{ host.vt_json.text | tojson }}) {% endfor %}#} {#{{whoopsie}}#} <script> $(document).ready(function () { $('myTable').DataTable({ paging: false, searching: false, info: false, columnDefs: [{ targets: '_all', createdCell: function (td, cellData, rowData, row, col) { if (cellData == 'outlook.com' && col == 0) { $(td).css({'background-color': 'red', 'color': 'white'}); } if (cellData.startsWith('Score: 0' && col == 1)) { $(td).css({'background-color': 'orange', 'color': 'white'}); } if (cellData > 0 && col == 2) { $(td).css({'background-color': 'grey', 'color': 'white'}); } if (cellData > 0 && col == 3) { $(td).css({'background-color': 'green', 'color': 'white'}); } }, } ] }) }); </script> {% endblock %}