jQuery表分类器在动态构建的表上出现故障

我需要动态构建表，但排序也是一项要求

我让tablesorter处理过许多其他的表，但这些都是静态表。我无法让它使用Ajax接收的数据处理动态构建的表。当然，您需要使用

$（'myTable'）.trigger（'updateAll'）修改数据后，这是我正在使用的tablesorter fork的数据

我已经在上面做了一个小演示

关于如何让它对动态表进行排序，或者这是一个bug，有什么想法吗？我使用的是最新版本的tablesorter插件和jQuery1.10.1

编辑：
1）我还尝试调用

$（'myTable'）.trigger（'destroy'）updateAll

。

---

2）我还尝试等到我构建了表之后再初始化表排序器插件。

正如@T.Shah所述，在

thead

中，将

th

添加到

tr

之外。发生这种情况是因为

th

被附加到

thead

，而不是该代码中的

tr

：

tblHead.append('<th>...</th>');

tblHead.append（“…”）；

更改这些行上的生成表代码以使其工作（）：

//开始该行
var html=''；
//填写表格标题（thead）行
对于（变量i=0；headerColumns.length-1>=i；i++）{
变量id=标题列[i]['id']；
var值=标题列[i][“值”]；
//检查此列是否有可用的平均值
如果（平均值[id]）{
值='平均值：'+平均值[id]+'
'+值；
}
//写入表头数据
html+=''+值+''；
}
//结束争吵
tblHead.append（html+“”）；

在

中，用于添加行的HTML不正确，应以

tblBody.append（“”）；

而是使用字符串来生成行：

html = "";
// Fill the table body (tbody) with all required rows of data
for (var key in reportData) {
  // Some object properties are inherited, we don't want these
  if (!reportData.hasOwnProperty(key)) {
    continue;
  }

  // Create a new table body row
  html += '<tr id="tblRow' + key + '">';

  // Apply data to each column in the row
  for (var i = 0; reportData[key].length - 1 >= i; i++) {
    var id = reportData[key][i]['id'];
    var value = reportData[key][i]['value'];

    // Write the column data
    html += '<td id="' + id + '"' + '>' + value + '</td>';
  }
  html += '</tr>';
}
tblBody.append(html);

html=”“；
//用所有必需的数据行填充表体（tbody）
for（报表数据中的var键）{
//有些对象属性是继承的，我们不需要这些属性
如果（！reportData.hasOwnProperty（键））{
继续；
}
//创建新的表体行
html+=''；
//将数据应用于行中的每一列
对于（var i=0；reportData[key]。长度-1>=i；i++）{
var id=reportData[key][i][id']；
var值=报告数据[key][i][value']；
//写入列数据
html+=''+值+''；
}
html+=''；
}
tblBody.append（html）；

然后触发一个“updateAll”

---

使用字符串构建HTML的原因是，为了获得最佳性能，最好尽可能少地与DOM交互。不要附加每个元素，而是构建一个HTML字符串并添加一次，或者在本例中添加两次—一次用于

thead

，一次用于

tbody

，正如@T.Shah所述，在

thead

中，

th

被添加到

tr

之外。发生这种情况是因为

th

被附加到

thead

，而不是该代码中的

tr

：

tblHead.append('<th>...</th>');

tblHead.append（“…”）；

更改这些行上的生成表代码以使其工作（）：

//开始该行
var html=''；
//填写表格标题（thead）行
对于（变量i=0；headerColumns.length-1>=i；i++）{
变量id=标题列[i]['id']；
var值=标题列[i][“值”]；
//检查此列是否有可用的平均值
如果（平均值[id]）{
值='平均值：'+平均值[id]+'
'+值；
}
//写入表头数据
html+=''+值+''；
}
//结束争吵
tblHead.append（html+“”）；

在

中，用于添加行的HTML不正确，应以

tblBody.append（“”）；

而是使用字符串来生成行：

html = "";
// Fill the table body (tbody) with all required rows of data
for (var key in reportData) {
  // Some object properties are inherited, we don't want these
  if (!reportData.hasOwnProperty(key)) {
    continue;
  }

  // Create a new table body row
  html += '<tr id="tblRow' + key + '">';

  // Apply data to each column in the row
  for (var i = 0; reportData[key].length - 1 >= i; i++) {
    var id = reportData[key][i]['id'];
    var value = reportData[key][i]['value'];

    // Write the column data
    html += '<td id="' + id + '"' + '>' + value + '</td>';
  }
  html += '</tr>';
}
tblBody.append(html);

html=”“；
//用所有必需的数据行填充表体（tbody）
for（报表数据中的var键）{
//有些对象属性是继承的，我们不需要这些属性
如果（！reportData.hasOwnProperty（键））{
继续；
}
//创建新的表体行
html+=''；
//将数据应用于行中的每一列
对于（var i=0；reportData[key]。长度-1>=i；i++）{
var id=reportData[key][i][id']；
var值=报告数据[key][i][value']；
//写入列数据
html+=''+值+''；
}
html+=''；
}
tblBody.append（html）；

然后触发一个“updateAll”

---

使用字符串构建HTML的原因是，为了获得最佳性能，最好尽可能少地与DOM交互。不要附加每个元素，而是构建一个HTML字符串并添加一次，或者在本例中添加两次-一次用于

thead

，一次用于

tbody

，

请解释否决票。我的问题是关于这个主题的，有一个完全可行的问题，有一个我的问题的例子，最少的相关代码，显示我已经尝试过，显示我已经研究过，显示我正在继续尝试通过我所做的编辑来解决这个问题。它有什么问题？我无法解决错误。但我想我已经发现了问题所在。在控制台中，TBL表头显示“…”。。。。。。。“等等。看来所有th标签都在tr标签之外。这一定是造成问题的原因。@T.Shah这确实是问题所在！我认为

会自动附加其结束标记，从而导致所有

单元格都放在它后面。如果你想将其作为答案提交，我会将其标记为已解决：）请解释否决票。我的问题是关于这个主题的，有一个完全可行的问题，有一个我的问题的例子，最少的相关代码，显示我已经尝试过，显示我已经研究过，显示我正在继续尝试通过我所做的编辑来解决这个问题。它有什么问题？我无法解决错误。但我想我已经发现了问题所在。在控制台中，tblHead显示“…”等。似乎所有th标签都在tr标签之外。这是