For循环Jquery正在创建表

For loop Jquery creating table

本文关键字:创建 循环 Jquery For      更新时间:2023-09-26

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

我有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小提琴可以在这里找到

http://jsfiddle.net/t16scofy/2

对于循环

只需大声阅读你的for循环:

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

变为:

对于i-从0开始-do。。。只要listOfNames的长度小于i.

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

同样适用于循环内部

更正:

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

或者如果你真的想要i之后。长度:

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

您在两个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');
}

演示