生成使用Javascript

Question

动态数据假设我有字母字符数组：

var qwerty = [['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'], ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'], ['z', 'x', 'c', 'v', 'b', 'n', 'm']]; 

我将如何呈现出来的三排喜欢用JS传统的键盘上，而不诉诸这样的：

<input type='button' value='Q' id='bt1'/> 
<input type='button' value='W' id='bt2'/> 
<input type='button' value='E' id='bt3'/> 
<input type='button' value='R' id='bt4'/> 
<input type='button' value='T' id='bt5'/> 
<input type='button' value='Y' id='bt5'/> 
<input type='button' value='U' id='bt7'/> 
<input type='button' value='I' id='bt8'/> 
<input type='button' value='O' id='bt9'/> 
<input type='button' value='P' id='bt10'/> 
<br> 
<input type='button' value='A' id='bt11'/> 
<input type='button' value='S' id='bt12'/> 
<input type='button' value='D' id='bt13'/> 
<input type='button' value='F' id='bt14'/> 
<input type='button' value='G' id='bt15'/> 
<input type='button' value='H' id='bt16'/> 
<input type='button' value='J' id='bt17'/> 
<input type='button' value='K' id='bt18'/> 
<input type='button' value='L' id='bt19'/> 
<br /> 
... 

非常感谢提前！

Answer 1

你会使用嵌套循环：

var counter = 0; 
for (var i = 0; i < qwerty.length; i++) { 
    for(var j = 0; j < qwerty[i].length; j++) { 
     document.write("<input type='button' value='" + qwerty[i][j] + "' id='bt" + counter++ + "'/>"); 
    } 
    document.write("<br>"); 
} 

IF你有兴趣，这里是为增加新的按钮清洁jQuery的解决方案，所以您不必使用document.write

<div id="qwertDiv" /> 

var counter = 0, newDiv; 
for (var i = 0; i < qwerty.length; i++) { 
    newDiv = $("<div />"); 
    for(var j = 0; j < qwerty[i].length; j++) { 
     newDiv.append($("<input type='button' />") 
         .val(qwerty[i][j]) 
         .attr("id", "bt" + counter++)); 
    } 
    $("#qwerty").append(newDiv).append("<br>"); 
}