1

登録済みと完了の 2 つのリンクがあるページがあります。いずれかをクリックすると、関連するデータを含むテーブルが作成されます。ボタンをクリックすると、現在のテーブルをページから削除し、(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()is [img images/calendars.png, div.width-100, table#courses_table].

のconsole.log#courses_tableが私を取得します[table#courses_table]。これらの結果を正しく解釈していれば、テーブルは存在するので、削除されない理由に戻ります。

2 番目の編集: 削除しようとしているテーブルに複数の 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 に答える