jQueryの/ Javascriptを：tablesorterが機能するようにするのasp.netデータグリッド出力のクライアント側の修正

Question

asp.netのデータグリッドの出力が動作するjQueryのtablesorterに必要なTHEADとTBODY要素を含んでいない。

例えば。それは次のようになります：

    <table>
        <tr>this is my header row</tr>
        <tr>content row 1</tr>
        <tr>content row 2</tr>
        <tr>content row 3</tr>
        ...
        <tr>content row n</tr>
    </table>

と、それは次のようになりする必要があります：

    <table>
        <thead>
            <tr>this is my header row</tr>
        </thead>
        <tbody>
            <tr>content row 1</tr>
            <tr>content row 2</tr>
            <tr>content row 3</tr>
            ...
            <tr>content row n</tr>
        </tbody>
    </table>

私は、動的に挿入するために、以下のjavascriptをノックしたが、テーブルはまだソート可能ではありません。 私は手動で出力HTMLに直接thead要素とTBODYタグを挿入すると、テーブルがソート可能であることを確認しましたが、私はDOMを使用してそれを実行しようとすると、それが動作するようには思えません。

私は何をしないのですか？

    $(document).ready(function() 
        { 
            var tbl = document.getElementById('mytableid');

            // new header and body elements to be inserted
            var tblHead = document.createElement('thead');
            var tblBody = document.createElement('tbody');
            // get the first row and the remainder
            var headerRow = $(tbl).find('tr:first')
            var bodyRows  = $(tbl).find('tr:not(:first)');

            // remove the original rows
            headerRow.remove();
            bodyRows.remove();

            // add the rows to the header and body respectively
            $(tblHead).append(headerRow);
            $(tblBody).append(bodyRows);

            // add the head and body into the table
            $(tbl).append(tblHead);
            $(tbl).append(tblBody);

            // apply the tablesorter
            $(tbl).tablesorter(); 
        } 
    ); 

編集：私は質問を投稿する前に私が実際に問題を解決し、私はそれが他の人に有用である可能性があるとして、私は、先に行くと、とにかくそれを投稿しようと思いました... 下記の私の答えを参照してください。

Answer 1

どうやら、ファントム要素は出力に表示されます。トリックは、それが生成されたものに追加する前に除去されることを確認することです... うまくいけば、これは誰かに役に立つでしょう！

    $(document).ready(function() 
        { 
            var tbl = document.getElementById('mytableid');

            // new header and body elements to be inserted
            var tblHead = document.createElement('thead');
            var tblBody = document.createElement('tbody');
            // get the first row and the remainder
            var headerRow = $(tbl).find('tr:first')
            var bodyRows  = $(tbl).find('tr:not(:first)');

            // remove the original rows
            headerRow.remove();
            bodyRows.remove();

            // SOLUTION HERE: 
            // remove any existing thead/tbody elements
            $(tbl).find('tbody').remove();
            $(tbl).find('thead').remove();

            // add the rows to the header and body respectively
            $(tblHead).append(headerRow);
            $(tblBody).append(bodyRows);

            // add the head and body into the table
            $(tbl).append(tblHead);
            $(tbl).append(tblBody);

            // apply the tablesorter
            $(tbl).tablesorter(); 
        } 
    ); 

Answer 2

上記のコードは依然としてヘッダ内のセルに対処していません。あなたがこれを追加することができ、タグにタグからそれらを変換するには：

$('thead tr td').each(function(i) { $(this).replaceWith("<th>" + $(this).html() + "<\/th>"); });