jQuery/JavaScript : Table기가 작동하도록 ASP.NET Datagrid 출력의 클라이언트 측정
-
22-08-2019 - |
문제
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();
}
);
편집 : 질문을 게시하기 전에 실제로 문제를 해결했지만 다른 사람들에게 유용 할 수 있으므로 어쨌든 게시 할 것이라고 생각했습니다 ... 아래의 답변을 참조하십시오.
해결책
분명히, 팬텀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();
}
);
다른 팁
위의 코드는 여전히 헤더의 셀을 다루지 않습니다. 태그에서 태그로 변환하려면 다음을 추가 할 수 있습니다.
$('thead tr td').each(function(i) {
$(this).replaceWith("<th>" + $(this).html() + "<\/th>");
});
제휴하지 않습니다 StackOverflow