jQuery/JavaScript : Table기가 작동하도록 ASP.NET Datagrid 출력의 클라이언트 측정

Question

ASP.NET DataGrid의 출력에는 jQuery 테이블 러가 작동하는 데 필요한 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

분명히, 팬텀u003Ctbody> 출력에 요소가 나타납니다. 속임수는 생성 된 것들을 추가하기 전에 제거되도록하는 것입니다 ... 희망적으로 이것은 누군가에게 유용 할 것입니다!

    $(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>"); });