用户输入在使用表单的表中

Question

我有一个问题，我已经研究了几天了。我需要做一个页面，请求用户的12个字母，并单击提交按钮。我不能靠工作来实现我的想法。欢迎提出建议!运行的Javascript应该做以下工作:生成一个随机数1-3，表示行数，并将这12个字符放入一个格式化的表中。例如，随机生成的表可能生成以下内容:

输入文本:abcdefghijkl

 a b c
 d e f
 g h i 
 j k l

或:

 a b c d
 e f g h
 i j k l

等。

我的HTML:

<form name="table">
<p>Enter 12 letters</p>
<input type="text" id= "userVal" size="12">
<input type="button" value="submit"  onclick="createTable()">

Javascript:

var numrows= randomnumber=Math.floor(Math.random()*4)
var numcols=4
document.write ("<table border='1'>")
for (var i=1; i<=numrows; i++)
{
    document.write ("<tr>");
    for (var j=1; j<=numcols; j++)
    {
            document.write ("<td>" + i*j + "</td>");
    }
    document.write ("</tr>");
}

document.write ("</table>");
function createTable(){

Answer 1

看看这是不是你想要的行为:

http://jsfiddle.net/sDbkw/

我将循环修改为基于零并引用文本框:

var createTable = function () {
   var numrows = Math.floor(Math.random()*3) + 1; // x3 gets 0, 1, or 2 so increment 1
   var numcols = 12 / numrows; // if always printing 12 chars
   var userText = $('#userVal').val();
   var output = "<table border='1'>";
   for (var i=0; i < numrows; i++)
   {
       output += "<tr>";
       for (var j=0; j<numcols; j++)
       {
           output += '<td>' + userText[i*numcols + j] + '</td>';
       }
       output += "</tr>";
   }
   output += "</table>";
   $('#output').html(output);
};