How to replace "TRUE" with a checked checkbox and "FALSE" with a nonchecked chec-CodePudding

I have a table that is formatted as

<table id="daily">

        <thead>
            <tr>
                <th >year</th>
                <th >cut off date</th>
                <th >Stefan</th>
                <th></th>
                <th >Johnny</th>
                <th></th>
                <th >Effie</th>
                <th></th>
                <th >Karol</th>
                <th></th>
                <th >Vardan</th>
                <th></th>
                <th >Aman</th>
                <th></th>
                <th >Jaspal</th>
                <th></th>
                <th >Laurent</th>
                <th></th>
            </tr>
        </thead>
        <tbody data-sheetdb-url="https://sheetdb.io/api/v1/xxxxxxxxx?sheet=Dashboard" data-sheetdb-sort-by="age"
            data-sheetdb-sort-order="desc">
            <tr>
                <td id="date">{{year}}</td>
                <td ><i>{{cut off date}}</i></td>
                <td id="hours">{{Stefan}}</td>
                <td >{{c1}}</th>
                <td id="total">{{Johnny}}</td>
                <td >{{c2}}</th>
                <td id="total">{{Effie}}</td>
                <td >{{c3}}</th>
                <td id="total">{{Karol}}</td>
                <td >{{c4}}</th>
                <td id="total">{{Vardan}}</td>
                <td >{{c5}}</th>
                <td id="total">{{Aman}}</td>
                <td >{{c6}}</th>
                <td id="total">{{Jaspal}}</td>
                <td >{{c7}}</th>
                <td id="total">{{Laurent}}</td>
                <td >{{c8}}</th>
            </tr>
        </tbody>
    </table>

The CSS I have is

#daily {
display: block;
position: relative;
background-color: #3C4AB8;
color: white;
border-collapse: collapse;
overflow-x: auto;
overflow-y: auto;
max-height: 80vh;
width: 90vw;
border: 10px solid #222A68;
font-family: 'Roboto Mono', monospace;
font-size: 20px;
margin-top: 2em;
margin-bottom: 2em;
}


#table thead th {
    position: sticky;
    top: 0;
}

td,
th {
    border: solid #E3DAFF 2px;
    padding: 0.5rem;
}

th {
    position: sticky;
    top: 0;
    border-top: none;
    background: #222A68;
    top: 0;
    text-align: center;
    padding: 8px;
    text-transform: uppercase;
}

td {
    border-bottom: none;
    white-space: wrap;
}

And so on.

This table fetches some data from a Google Sheet using https://sheetdb.io/ as a backend. There are values in some cells that are checkboxes returning as either "TRUE" or "FALSE".

How can I replace these values with checkboxes that are checked when the value is "TRUE" and unchecked when the value is "FALSE"?

Thank you!

CodePudding user response：

You can user prop method of jquery

$("#yourCheckboxId").prop("checked", value)

if the value is true the checkbox will be checked and if the value will be false the checkbox will be unchecked

CodePudding user response：

this will enumerate all td with class checkbox and replace all TRUE/FALSE inside with checkboxes

$("table#daily tbody td.checkbox").each(function(){
    var td = $(this);
    var txt = td.text().toUpperCase().trim();
    if (txt == "TRUE") {
        td.html('<input type="checkbox" checked>');
    }
    if (txt == "FALSE") {
        td.html('<input type="checkbox">');
    }
})