如何在HTML表中将"TRUE“替换为复选框，将"FALSE”替换为非复选框？

Question

我有一张表被格式化为

代码：

​

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

   <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}}</td>
                    <td id="total">{{Johnny}}</td>
                    <td class="checkbox">{{c2}}</td>
                    <td id="total">{{Effie}}</td>
                    <td class="checkbox">{{c3}}</td>
                    <td id="total">{{Karol}}</td>
                    <td class="checkbox">{{c4}}</td>
                    <td id="total">{{Vardan}}</td>
                    <td class="checkbox">{{c5}}</td>
                    <td id="total">{{Aman}}</td>
                    <td class="checkbox">{{c6}}</td>
                    <td id="total">{{Jaspal}}</td>
                    <td class="checkbox">{{c7}}</td>
                    <td id="total">{{Laurent}}</td>
                    <td class="checkbox">{{c8}}</td>
                </tr>
            </tbody>
        </table>

​

这个表使用https://sheetdb.io/作为后端从Google中获取一些数据。有些单元格中的值是复选框，返回为"TRUE“或"FALSE”。

如何将这些值替换为在值为"TRUE“时选中的复选框，以及在值为"FALSE”时未选中的复选框？

谢谢!

Answer 1

您需要侦听加载的工作表事件。

//Event listener for sheet loaded
window.addEventListener("sheetdb-downloaded", function () {
  //Iterate the checkbox items
  $(".checkbox").each(function () {
    //debug logging
    console.log($(this).text() == "TRUE")
    //UPdate the html based on loaded content
    $(this).html(
      `<input type="checkbox"${
        $(this).text().toUpperCase().trim() == "TRUE" ? " CHECKED" : ""
      }>`
    );
  });
});

钢笔

Answer 2

您可以使用jquery的用户支持方法。

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

如果值为true，则选中复选框，如果值为false，则不选中复选框。

Answer 3

这将枚举所有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">');
    }
})