空のテーブルを持つHTMLdivセクションがあります。
<div id="report_result" class="container">
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
</table>
</div>
ここで、ページでの使用によって選択されたパラメーターに基づいて、テーブルのヘッダーと本文を動的に作成します。
function runreport(datastring)
{
var tables_header = $('<thead><tr><th>Flow State</th><th>Flow Logging Id</th><th>Co-relation Id</th></tr></thead><tbody></tbody>');
('#example').empty(); // added later
tables_header.appendTo('#example');
}
クリックすると、ユーザーが選択したオプションで「runreport」関数を呼び出す「RunReport」ボタンがあります。
初回のテーブルは正常に表示されますが、ユーザーが[レポートの実行]ボタンをもう一度クリックすると、テーブルの内容が複製されます。したがって、クリックするたびに、テーブルヘッダーが追加されます。
そのため、同じものを作成する前に、すべてのテーブルヘッダー、行、フッターなどを削除します。
しかし、初めての場合でも次のようなエラーが発生します。
"#example".empty is not a function
[Break On This Error]
('#example').empty();
しかし、http：//api.jquery.com/empty/にはこのメソッドが記載されていますが、なぜこのエラーが発生するのでしょうか。