JQuery/Javascript：客户端修改 asp.net 数据网格输出以允许表排序器工作

Question

asp.net datagrid 的输出不包括 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 来动态插入它们，但该表仍然不可排序。 我已经确认，如果我将 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("" + $(this).html() + "<\/th>");
});