1

我有一个页面,其中有两个链接 - 已注册和已完成。单击任一创建一个包含相关数据的表。单击按钮时,需要从页面中删除当前表,并创建新表(通过 Javascript)并附加。出于某种原因,.remove().empty()没有在动态创建的表上工作。已注册和已完成链接始终存在于页面上。

HTML:

<body>
    <a id="completed" class="btn" title="Completed">Completed</a>
    <a id="enrolled" class="btn" title="Enrolled">Enrolled</a>
    <div id="table_container">
        <table id="courses_table"></table>
    </div>
</body>

Javascript:

$(document).ready(function() {
    $("a[class*=btn]").click(function(e) { 
        display_type = this.id; 

        getTags(display_type);

        e.preventDefault();
    }); 
});

function getTags(type) {
    $('#courses_table').remove();

    //ajax call to get data, create string of new table html, append it to the container div
    var table_data = '<table id="courses_table">...</table>';

    $('#table_container').append(table_data);
}

我尝试将其.remove()移入点击事件或成功函数,并删除整个包含的 div,但没有任何乐趣。附加没有问题。我敢肯定这是我想念的简单的东西。

编辑:console.log#table_container.children()[img images/calendars.png, div.width-100, table#courses_table].

一个 console.log#courses_table得到我[table#courses_table]。如果我正确解释了这些结果,则该表存在,所以我回到为什么它没有被删除。

编辑第二个:我忘了提到我要删除的表有多个 tbody 标签。也许这会导致问题?我确实尝试在删除它之前清空桌子,但它没有用。

这是一个显示我所看到的小提琴:http: //jsfiddle.net/c4Y3U/13/

4

1 回答 1

0

而不是使用

id="courses_table"

利用

class="courses_table"

当然相应地更新 jQuery 选择器,请参阅http://jsfiddle.net/c4Y3U/22/

于 2013-01-05T00:35:44.500 回答