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 来动态插入它们,但表格仍然无法排序。 我已经确认,如果我将 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();
}
);
编辑:我实际上在发布问题之前解决了问题,但我想我还是会继续发布它,因为它可能对其他人有用...... 请参阅下面的答案。
最佳答案
显然,幻影
元素出现在输出中。诀窍是确保在添加生成的之前将其删除...... 希望这对某人有用! $(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();
}
);
关于asp.net - JQuery/Javascript : Client side modification of asp.net datagrid 输出以允许 tablesorter 工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/701706/