Javascript 尝试使用Tablesorter动态构建表

我正在尝试使用TableSorterjQuery插件来构建一个完全动态的表（标题和数据）

与大多数web应用程序一样，用户输入一些数据/条件，单击按钮，然后返回数据。我构建了一个表来保存数据，用户可以对其进行排序。 但是，我们决定，用户需要能够指定他们想要的数据列以及这些列的顺序

数据检索已经完成。我通过web方法从aspx页面向后面的aspx.vb代码进行javascript/jQuery调用。隐藏的代码与DLL交互 它将其信息传递回数据表。我从datatable构建一个字符串，以传递回javascript/jQuery代码。在javascript中，字符串被拆分为 字符串数组

以下是我以前构建表的方式（在满足用户指定列和列顺序的要求之前）：

HTML:

我为每个类设置了div类，因为头和数据没有正确排列，因为它们是在不同的时间创建的。这很好，但是因为用户需要能够确定他们看到的列以及它们的顺序，所以我不得不稍微改变一下方法。我遇到了 为TableSorter构建表小部件，并尝试按如下方式实现它：

HTML:

然而，这是行不通的。如果我添加“$（'#mytable'）.append（table）；”它将追加文本，但我仍然没有得到表。我已经确定了构建表的代码 小部件包含在项目中，如果我设置了断点，它将在加载时被命中

最终目标是从数据库中读取用户的列首选项（这将很容易），并使用所选列完全动态地生成表。 然后，该表需要是可排序的，具有可重新排序的列（我还为其提供了一个TableSorter小部件），并且这些列需要是可调整大小的（另一个TableSorter小部件）

如何动态构建此表，以实现上述目标，并使列与数据对齐？

---

我做错了什么？提前感谢您提供的任何帮助

在我看来，表的

tbody

需要被定位

嗯，似乎

$（“#mytable”）

实际上是针对一个表元素；由于javascript没有

thead

或

tbody

元素，因此追加代码应该如下所示：

$('#mytable tbody').append(table);

至于用户构建的修改后的头，我没有看到上面的代码

如果您想使用build小部件，上面的

表

数组应该包含一个行数组数组，目前它正在构建一个大字符串数组。请尝试以下方法（未经测试）：

var表=[]；
表.push（[''，Column2'，Column3'，Column4'，Column5'，Column6'，Column7'，Column8'，Column9'，Column10'，Column11'，Column12'，Column13'，Column14'，Column15'，Column16'，Column17']）；
对于（var i=1；我将对此进行一次尝试并返回结果。感谢您的回复！现在我收到一个JavaScript错误，指出“对象不支持属性或方法‘replace’”。尝试以下操作时，jquery.min.js文件中会出现这种情况：$（'#myTable'）.tablesorter（{theme:'default'，widgets:['zebra'，'stickyHeaders'，widgetOptions:{build_源代码：表，build_头：{行：1，类：[]，文本：[]，宽度：}，}}}）；（由于注释长度限制，已删除页脚和宽度）执行追加时似乎出现了问题。这似乎与标记中已经存在节这一事实有关。但是，当我删除节的标记时，没有出现错误，但也没有追加表数据。您使用的是哪种方法？追加行，还是使用构建小部件？它们都是不应该一起使用。两者都试过了。一起使用是导致错误的原因（我的错误），单独使用小部件并没有填充表。在文档中，看起来唯一需要的标记是一个ID与我的表名相同的标记。尝试了，但没有效果。还尝试了标记，也尝试了和，但没有成功。检查了对小部件的调用（同时，我在标记中有对它的引用）.我会再看一遍医生，看看我是否遗漏了什么。如果你看到/想到我遗漏了什么，我感谢你的建议！
var table = '';

for (var i = 1; i <= NumberOfRecords; i++) { //for each record
   if (i % 2 == 0) { table += '<tr class="even">'; } else {
       table += '<tr>';
   }


   table += '<td><div class="1"><img src="/resources/ic_menu_search.png" alt="" height="20" width="20" style="cursor: pointer;" id="' + i + '" ></img></div></td>';
   table += '<td><div class="2">' + TableResults[((i - 1) * 459) + 1] + '</div></td>';
   table += '<td><div class="3">' + TableResults[((i - 1) * 459) + 4] + '</div></td>';
   table += '<td><div class="4">' + TableResults[((i - 1) * 459) + 5] + '</div></td>';
   table += '<td><div class="5">' + TableResults[((i - 1) * 459) + 6] + '</div></td>';
   table += '<td><div class="6">' + TableResults[((i - 1) * 459) + 9] + '</div></td>';
   table += '<td><div class="7">' + "$" + TableResults[((i - 1) * 459) + 12] + ".00" + '</div></td>';
   table += '<td><div class="8">' + TableResults[((i - 1) * 459) + 15] + '</div></td>';
   table += '<td><div class="9">' + TableResults[((i - 1) * 459) + 16] + '</div></td>';
   table += '<td><div class="10">' + TableResults[((i - 1) * 459) + 37] + '</div></td>';
   table += '<td><div class="11">' + TableResults[((i - 1) * 459) + 38] + '</div></td>';
   table += '<td><div class="12">' + TableResults[((i - 1) * 459) + 39] + "%" + '</div></td>';
   table += '<td><div class="13">' + TableResults[((i - 1) * 459) + 45] + '</div></td>';
   table += '<td><div class="14">' + TableResults[((i - 1) * 459) + 66] + '</div></td>';
   table += '<td><div class="15">' + TableResults[((i - 1) * 459) + 78] + '</div></td>';
   table += '<td><div class="16">' + "$" + TableResults[((i - 1) * 459) + 81] + ".00" + '</div></td>';
   table += '<td><div class="17">' + TableResults[((i - 1) * 459) + 109] + '</div></td>';
   table += '</tr>';


  } 



$('#mytable').append(table);

$('#mytable').tablesorter({
              theme: 'default',
              widgets: ['zebra', 'reorder'],
              widgetOptions: {
                  reorder_axis: 'x', // 'x' or 'xy'
                  reorder_delay: 300,
                  reorder_helperClass: 'tablesorter-reorder-helper',
                  reorder_helperBar: 'tablesorter-reorder-helper-bar',
                  reorder_noReorder: 'reorder-false',
                  reorder_blocked: 'reorder-block-left reorder-block-end',
                  reorder_complete: null // callback
              }

          })

   <div id="mytable">
   </div>

   var table = [];

   table += '[ [' + ['', 'Column2', 'Column3', 'Column4', 'Column5', 'Column6', 'Column7', 'Column8', 'Column9', 'Column10', 'Column11', 'Column12', 'Column13', 'Column14', 'Column15', 'Column16', 'Column17'] + '],';

   for (var i = 1; i <= NumberOfRecords; i++) { //for each record
      table += '[' + [i, TableResults[((i - 1) * 459) + 1], TableResults[((i - 1) * 459) + 4], TableResults[((i - 1) * 459) + 5], TableResults[((i - 1) * 459) + 6], TableResults[((i - 1) * 459) + 9], TableResults[((i - 1) * 459) + 12], TableResults[((i - 1) * 459) + 15], TableResults[((i - 1) * 459) + 16], TableResults[((i - 1) * 459) + 37], TableResults[((i - 1) * 459) + 38], TableResults[((i - 1) * 459) + 39], TableResults[((i - 1) * 459) + 45], TableResults[((i - 1) * 459) + 66], TableResults[((i - 1) * 459) + 78], TableResults[((i - 1) * 459) + 81], TableResults[((i - 1) * 459) + 109]] + ']';

      if (i != NumberOfRecords) {
          table += ',';
      }
   }

   table += '];'

   $('#mytable').tablesorter({
              theme: 'default',
              widgets: ['zebra', 'reorder', 'stickyHeaders'],//, 'resizable'],
              widgetOptions: {
                  build_source: table,
                  build_headers: {
                      rows: 1,
                      classes: [],
                      text: [],
                      widths : ['3%', '8%', '7%', '7%', '7%', '7%', '6%', '7%', '7%', '7%', '7%', '7%', '7%', '7%', '6%']
                  }

              }

          })

$('#mytable tbody').append(table);

var table = [];
table.push(['', 'Column2', 'Column3', 'Column4', 'Column5', 'Column6', 'Column7', 'Column8', 'Column9', 'Column10', 'Column11', 'Column12', 'Column13', 'Column14', 'Column15', 'Column16', 'Column17']);

for (var i = 1; i <= NumberOfRecords; i++) { //for each record
    table.push([
        '<div class="1"><img src="/resources/ic_menu_search.png" alt="" height="20" width="20" style="cursor: pointer;" id="' + i + '" ></div>',
        '<div class="2">' + TableResults[((i - 1) * 459) + 1] + '</div>',
        '<div class="3">' + TableResults[((i - 1) * 459) + 4] + '</div>',
        '<div class="4">' + TableResults[((i - 1) * 459) + 5] + '</div>',
        '<div class="5">' + TableResults[((i - 1) * 459) + 6] + '</div>',
        '<div class="6">' + TableResults[((i - 1) * 459) + 9] + '</div>',
        '<div class="7">$' + TableResults[((i - 1) * 459) + 12] + '.00</div>',
        '<div class="8">' + TableResults[((i - 1) * 459) + 15] + '</div>',
        '<div class="9">' + TableResults[((i - 1) * 459) + 16] + '</div>',
        '<div class="10">' + TableResults[((i - 1) * 459) + 37] + '</div>',
        '<div class="11">' + TableResults[((i - 1) * 459) + 38] + '</div>',
        '<div class="12">' + TableResults[((i - 1) * 459) + 39] + '%</div>',
        '<div class="13">' + TableResults[((i - 1) * 459) + 45] + '</div>',
        '<div class="14">' + TableResults[((i - 1) * 459) + 66] + '</div>',
        '<div class="15">' + TableResults[((i - 1) * 459) + 78] + '</div>',
        '<div class="16">$' + TableResults[((i - 1) * 459) + 81] + '.00</div>',
        '<div class="17">' + TableResults[((i - 1) * 459) + 109] + '</div>'
    ]);
}

$('#myTable').tablesorter({
    theme: 'default',
    widgets: ['zebra', 'stickyHeaders'],
    widgetOptions : {
        build_source : table,
        build_headers : {
            rows    : 1,
            classes : [],
            text    : [],
            widths : ['3%', '8%', '7%', '7%', '7%', '7%', '6%', '7%', '7%', '7%', '7%', '7%', '7%', '7%', '6%']
        },
        build_footers : {
            rows    : 0
        }
    }
});