テーブルの要素をクリアする

Question

テーブルのtheadを動的に作成しています。問題は、初めて私のメソッドを呼び出すと完全にヘッダーが作成されますが、同じテーブルで再度呼び出すと、以前のヘッダーは削除されません。前にtheadをクリアするにはどうすればよいですか？

私はCreateHTMLTableを呼び出す前に、このように空にしようとしたが、

function CreateHTMLTable(tableId, displayColumnNames) { 
    var columnNames = []; 
    for (var k in displayColumnNames[0]) { 
     columnNames.push(k); 
    } 
    var $toAttach = $("<thead><tr></tr></thead>"); 

    for (var i = 0; i < columnNames.length; i++) { 
     var $thead = $("<th></th>"); 
     $thead.text(columnNames[i]); //columnNames is array of string containing column names 
     $toAttach.find("tr").append($thead); 
    } 
    $(tableId).append($toAttach); 
} 

HTML

<table id="tblActivitySummary" class="display nowrap" cellspacing="0" width="100%"> 
    <span class="table-mainhead">Activity Summary</span> 
</table> 

jQueryが動作しません：それは追加され

$('#tblActivitySummary').empty(); 
CreateHTMLTable('#tblActivitySummary', displayColumnNames); 

Answer 1

は、.appendを使用しているため、指定されたコンテナに内容を追加します。代わりに、追加の

$(tableId).append($toAttach); 

、あなたは直接、新しいものとタグを置き換えるために.replaceWith()を使用することができます。

$(tableId + " thead").replaceWith($toAttach); 

編集：

次のスニペットが存在しないthead最初の時間を追加する機能を追加します。

$(tableId + " thead").length === 0 ? $(tableId).append($toAttach) : $(tableId + " thead").replaceWith($toAttach);