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>
<html>
<head>

    <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="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css">


<style>
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}

</style>
</head>
<body>

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

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

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

<script>

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

</script>

</body>
</html>

Replies

This discussion has been closed.