Select-Checkbox shows up but cannot be clicked

Select-Checkbox shows up but cannot be clicked

cfast20cfast20 Posts: 2Questions: 0Answers: 0

I'm trying to incorporate check boxes into my site where a table is created from a database using DataTables. The end goal is to have a function run for all the lines that are checked. So far everything looks correct and the check boxes appear in the correct column, but I cannot actually click on them. Any ideas?

<!DOCTYPE html>

    <script type="text/javascript" language="javascript" src="/static/jquery-3.3.1.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/DataTables/datatables.min.css"/>
    <script type="text/javascript" src="/static/DataTables/datatables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="">
    <link rel="stylesheet" type="text/css" href="">

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;

tr:nth-child(even) {
    background-color: #dddddd;

#MainHead thead{

background-color : #FF0000;
font-weight: bold;

#results:hover{background-color: #A9A9A9}


<a href = "{{ url_for('FWLog') }}">
<img src="/static/banner.jpg" alt = "Logo" width="100%" height="100%" class="center">

<h2 align="center">Testing Results Table</h2>

<table id="MainHead" class="display">
      <th>Test ID</th>
      <th>Test Name</th>
      <th>Test Category</th>
      <th>Software Version</th>
      <th>Test Status</th>
      <th>Test Run Time (s)</th>
      <th>Platform / Method</th>
      <th>Time Started</th>
      <th>Time Finished</th>
 {% for h in data %}
                    <tr id="results">
                        {% for i in h %}
                            <a href = "{{ url_for('Details' ,testid=h[0]) }}"> {{i}} </a>
                        {% endfor %}
                    {% endfor %}


$(document).ready(function() {
    $('#MainHead').DataTable( {
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        order: [[ 1, 'desc' ]]
    } );
} );




This discussion has been closed.