JQuery的/ JavaScript的：asp.net的DataGrid输出的客户端修改允许的tablesorter工作

Question

的

asp.net数据网格的输出不包括用于所述的jquery的tablesorter工作所需的THEAD和TBODY元素。

E.g。它看起来像这样：

    <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来动态地将它们插入，但表仍不排序。 我已经证实，如果我直接手动插入THEAD和TBODY标签到输出HTML，该表可排序的，但是当我尝试使用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>"); });