如何在HTML表格中用選中的復選框替換“TRUE”，用未選中的復選框替換“FALSE”？

我有一個格式為

<table id="daily">

        <thead>
            <tr>
                <th class="year">year</th>
                <th class="cutoff">cut off date</th>
                <th class="name">Stefan</th>
                <th></th>
                <th class="name">Johnny</th>
                <th></th>
                <th class="name">Effie</th>
                <th></th>
                <th class="name">Karol</th>
                <th></th>
                <th class="name">Vardan</th>
                <th></th>
                <th class="name">Aman</th>
                <th></th>
                <th class="name">Jaspal</th>
                <th></th>
                <th class="name">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 class="cutoff"><i>{{cut off date}}</i></td>
                <td id="hours">{{Stefan}}</td>
                <td class="checkbox">{{c1}}</th>
                <td id="total">{{Johnny}}</td>
                <td class="checkbox">{{c2}}</th>
                <td id="total">{{Effie}}</td>
                <td class="checkbox">{{c3}}</th>
                <td id="total">{{Karol}}</td>
                <td class="checkbox">{{c4}}</th>
                <td id="total">{{Vardan}}</td>
                <td class="checkbox">{{c5}}</th>
                <td id="total">{{Aman}}</td>
                <td class="checkbox">{{c6}}</th>
                <td id="total">{{Jaspal}}</td>
                <td class="checkbox">{{c7}}</th>
                <td id="total">{{Laurent}}</td>
                <td class="checkbox">{{c8}}</th>
            </tr>
        </tbody>
    </table>

我擁有的 CSS 是

#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;
}

等等。

該表使用https://sheetdb.io/作為后端從 Google Sheet 獲取一些資料。某些單元格中的值是復選框，回傳為“TRUE”或“FALSE”。

如何用值為“TRUE”時選中而值為“FALSE”時取消選中的復選框替換這些值？

謝謝！

uj5u.com熱心網友回復：

您可以使用 jquery 的 prop 方法

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

如果值為真，復選框將被選中，如果值為假，復選框將被取消選中

uj5u.com熱心網友回復：

這將列舉所有帶有類復選框的 td 并用復選框替換里面的所有 TRUE/FALSE

$("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">');
    }
})

標籤：javascript html 查询 css

上一篇：如何在純Javasvript中從父級到子級添加addEventListener？

下一篇：當輸入的某些單詞無法按預期作業時顯示一個div