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>"); 
}

使用Javascript生成动态数据

1 个答案: