Question

我有一个应用程序（FreeCodeCamp项目），其中Twitch帐户列表显示为在线或离线。

我使用的表是由

形式的模板实例构成的

 <template id="new-row">
   <td class="account-data logo"></td>
   <td class="account-data name"></td>
   <td class="account-data status></td>
    ...
  </template>

因此每一行都是模板的唯一实例。

我需要能够清理表格并重新打印。

任何类型的.removeChild或.remove方法都会删除模板本身而不删除实例或不执行任何操作。

这里有替代品吗？

Answer 1

最简单的方法是将模板存储在变量中，以防止删除。其他方法包括创建包含模板内容的标记。

<script type="template/html" id='myTemplate'>
    <td class="account-data logo"></td>
    <td class="account-data name"></td>
    <td class="account-data status"></td>
</script>

现在您可以使用以下代码来获取模板

var template = $("#myTemplate").text();

现在填充表格

function populateTableRows(rows) {
    var tbody = $("#myTable tbody");

    for(var i = 0; i < rows.length; i++) {
        var currentRow = rows[i];
        var row = $("<tr>" + template + "</tr>");
        row.find("td:eq(0)").text(currentRow.logo);
        row.find("td:eq(1)").text(currentRow.name);
        row.find("td:eq(2)").text(currentRow.status);

        tbody.append(row);
    }
}

清除表格

function clearTableRows() {
    var tbody = $("#myTable tbody");
    tbody.html("");
}

为了让生活更轻松，你可以使用一些模板库，一些例子是

Answer 2

也许调用.show()或.hide()函数会有效吗？那或创建一个显示和隐藏你想要的类，并使用javascript添加类或删除它。

删除html模板实例

2 个答案: