如何在 html 中更新表格视图？答案

【问题标题】：How to update table view in html?如何在 html 中更新表格视图？
【发布时间】：2016-06-12 23:48:57
【问题描述】：

我已将此代码用于我的项目https://getmdl.io。它简单且设计精美的前端。它会在页面加载后为每一行加载一些复选标记。

但是，在使用 ajax 向 tbody 动态添加更多行后，我无法更新表格视图。我通过获取 tbody 元素添加它们，然后使用 document.createElement("td")

<table id="test-table" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
    <thead>
        <tr>
            <th class="mdl-data-table__cell--non-numeric">Predmet</th>
            <th>Vreme</th>
            <th>Datum</th>
        </tr>
    </thead>
    <tbody>
        <data-mdl-data-table-selectable-name="materials[]" data-mdl-data-table-selectable-value="acrylic">
    <tr>
        <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
        <td>10</td>
        <td>$2.35</td>
    </tr>
</tbody>
</table>

用于添加新行的代码：

$.ajax({
    url: "api2.php",
    success: function(result) {
        result = $.parseJSON(result);
        $tabela = $("#test-table").find("tbody");
        for (var i = 0; i < result.length; i++) {
            var newTrow = document.createElement("tr");
            var newTdata = document.createElement("td");
            newTdata.className="mdl-data-table__cell--non-numeric";
            newTdata.innerHTML = result[i];
            newTrow.appendChild(newTdata);
            newTrow.innerHTML+="<td>asdf</td><td>asdf</td>";

            $($tabela).append(newTrow);

        };
        componentHandler.upgradeElement($tabela, "mdl-data-table--selectable"); // I have tried many options for both parameters nothing works

        if (chosen_browser_is_supported()) {
            $("#subjects").chosen({
                width: "450px"
            });
        } else {
            $("#subjects").show();
        }
    }
});

根据用于此目的的源https://github.com/jasonmayes/mdl-component-design-pattern，我应该这样做

componentHandler.upgradeElement(document.getElementById("test-table"))

但这根本不起作用。

MaterialDataTable 在 Web 控制台中也是可见的，但我不知道如何使用它。

【问题讨论】：

提供“动态添加更多行”的 JS 代码。
我刚刚更新了帖子。

标签： javascript ajax frontend materialize material-design-lite

【解决方案1】：

我认为您的问题可能是 upgradeElement 在这种情况下需要是复数形式。试试看

componentHandler.upgradeElements(document.getElementById("test-table"));

如果这不起作用（过去这些方法中存在错误）尝试升级整个页面：

componentHandler.upgradeDom();

【讨论】：

【解决方案2】：

似乎放弃了对 mdl 表的这种支持。现在期望开发人员创建复选框而不是依赖 mdk。这与 getmdl 网站（2016 年 6 月 13 日）上当前可用的信息形成对比，但它在 github 上的问题中进行了讨论。

解决方案可在此处的 github wiki 页面上找到：

https://github.com/google/material-design-lite/wiki/Deprecations#automatic-selection-checkboxes

【讨论】：