Question

我有以下表格元素：

<table id="my-table" class="table table-striped table-hover ">Loading...</table>

我在ajax调用中动态创建表，然后将数据写入表：

<script>
$.ajax({
   success:function(result){
    $.getScript("table-sort-controller.js", function () {
        sortTable("my-table")
    }); //makes table sortable using DataTables
    $.getScript("search-controller.js"); //makes table searchable using DataTables
   },
    url: "http://myserver:8080/url/"
    }).then(function(data) {
    var table = "<thead>";
    table += createTableHeader(data);  //fake method to simplify code
    table += "</thead>";
    table += "<tbody id='sortable-cells'>";
    table += createTableBody(data);  //fake method to simplify code
    table += "</tbody>";
    //This is the line where I try to clear "Loading...".
    document.getElementById("my-table").innerHTML = table;
});
</script>

但是，我无法从加载的表顶部删除"Loading..."。我在创建表后直接在行中尝试了以下内容：

document.getElementById("my-table").innerHTML = "";
document.getElementById("my-table").empty();
//a few other attempts I cannot remember

更多信息：

alert(document.getElementById("my-table")); //output is [object HTMLTableElement]
alert(document.getElementById("my-table").innerHTML); //output is empty alert
alert(document.getElementById("my-table").getCaption()); //console says "undefined is not a function"

我不清楚为什么getCaption()返回undefined，因为它似乎是W3C下的函数。

如何在我的表加载完成后以及使用适当的HTML填充"Loading..."之前删除#my-table？或者，如何在写完表格后立即删除"Loading..."？

Answer 1

感谢@Phylogenesis和@Paul Roub，修复它！

我改变了

<table id="my-table" class="table table-striped table-hover ">Loading...</table>

到

<table id="my-table" class="table table-striped table-hover "><tr><td>Loading...</td></tr></table>

然后我添加了以下内容以删除旧的"Loading..."。

$('#my-table').empty();

现在它有效。谢谢！

编辑：在我的特定情况下，我实际上能够完全删除清除调用，因为我在下一行中覆盖了元素。

清除HTMLTableElement的内容

1 个答案: