【问题标题】：For loop Jquery creating table [closed]For循环Jquery创建表[关闭]
【发布时间】：2023-03-11 13:13:01
【问题描述】：

我一直在尝试根据另一个函数返回的数组动态创建一个表。

我有 2 个数组：

var listOfNames = ['a', 'b', 'c'];
var scoreLabels = ['Query', 'Entry', '% Matched', 'Alignment Len', 'Mismatches', 'Gaps', 'E-Value', 'Bitscore'];

第一个数组将包含每行的 id 元素。

第二个数组是每一行的列列表。

我的 html 是这样的

<table>
  <tbody></tbody>
</table>

我写的 for 循环看起来像这样：

for (var i = 0; listOfNames.length < i; i++) {
  var row = $('<tr></tr>');
  $(row).attr('id', listOfNames[i]);

  for (var x = 0; scoreLabels.length < x; x++) {
      var tableHeader = $('<td></td>');
      $(tableHeader).attr('text', scoreLabels[x]);
      $(tableHeader).appendTo(row);      
  } 
$(row).appendTo('table');
}

我一直在看其他教用 jquery 动态创建表的帖子，但无济于事。

请多多指教，让我知道我哪里出错了。

js fiddle可以在这里找到

http://jsfiddle.net/t16scofy/2

【问题讨论】：

for (var i = 0; listOfNames.length < i; i++)
你小提琴有错别字for (var i = 0; listOfNames.lenth < i; i++)
另一个错字：.appendTo('tabl')
row 已经是 jQuery 集合了，不需要再包装了。此外，您在appendTo() 方法中拼写错误table，因此row 没有任何反应
抱歉，错字已修复，但仍然无法正常工作...过去一个小时我的头在键盘上砸了。

标签： javascript jquery html arrays

【解决方案1】：

For 循环...

大声朗读你的 for 循环：

for (var i = 0; listOfNames.length < i; i++) {...}

变成：

for i - 从 0 开始 - 只要 listOfNames 的长度小于 i，就做 ...

我从 0 开始，listOfNames 的长度总是大于 0。它永远不会更小。所以这个 for 循环永远不会做...

内部for循环也一样

更正：

for (var i = 0; i < listOfNames.length; i++) {...}

或者如果你真的想要 .length 之后的 i：

for (var i = 0; listOfNames.length > i; i++) {...}

【讨论】：

【解决方案2】：

您的for loops 中都有一些拼写错误和错误条件。

应该这样做：

var listOfNames = ['a', 'b', 'c'];

var scoreLabels = ['Query', 'Entry', '% Matched', 'Alignment Len', 'Mismatches', 'Gaps', 'E-Value', 'Bitscore'];

// If i starts with 0, and you're incrementing it, you obviously want the loop 
// to go until it reaches a bigger value, not the other way round.
for (var i = 0; i < listOfNames.length; i++) {
    var row = $('<tr>', { class: i.toString() });

    // If x starts with 0, and you're incrementing it, you obviously want the loop 
    // to go until it reaches a bigger value, not the other way round.
    for (var x = 0; x < scoreLabels.length; x++) {
        var tableHeader = $('<td>', { text: scoreLabels[x] });

        tableHeader.appendTo(row);
    }

    row.appendTo('table');
}

Demo

【讨论】：