For循环Jquery创建表

时间:2014-09-08 12:32:19

标签: javascript jquery html arrays

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

我有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

2 个答案:

答案 0 :(得分:2)

for循环...

大声读出你的for循环:

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

变为:

  

for i - 从0开始 - 只要listOfNames的长度小于i,就可以......

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

同样适合你内在的for-loop

校正:

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

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

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

答案 1 :(得分: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