2

我正在尝试使用 Javascript 根据用户输入创建一个表（实际上是两个或三个表，具体取决于用户输入..），我非常熟悉 PHP，并且已经在 PHP 中使用它，但是我希望用户以便能够在查询之前看到该表。我在这里找到了一个脚本，它部分完成了我想要的并尝试对其进行编辑（我发现它与 PHP 惊人地相似） 基本上它计算单元格（端口）的总量，将其按行和列拆分，即“超级”列如果用户希望将其拆分为多个表，这些表彼此相邻对齐，因此使用 div 标签。这是我的 JS：

<html>
<head>
<script type="text/javascript">
function createTable()
{
var num_ports = document.getElementById('ports').value;
var num_super = document.getElementById('super').value;
var num_rows = document.getElementById('rows').value;
var num_cols = document.getElementById('cols').value;
var tbody = '';
var colStart = num_cols / num_super;
for( var i=0; i<num_super; i++){
    var theader = '<div><table border="1">\n';
        for(u=1; u<=num_row; u++){
          tbody += '<tr>';
            for( var j=0; j<colStart; j++)
            {
            tbody += '<td>';
            tbody += 'Cell ' + i + ',' + j;
            tbody += '</td>'
            }
    tbody += '</tr>\n';
}
var tfooter = '</table></div>';
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
</script>
</head>

<body>
<form name="tablegen">
<label>Ports: <input type="text" name="ports" id="ports"/></label><br />
<label>Super Columns: <input type="text" name="super" id="super"/></label><br />
<label>Rows: <input type="text" name="rows" id="rows"/></label><br />
<label>Columns: <input type="text" name="cols" id="cols"/></label><br/>
<input name="generate" type="button" value="Create Table!" onclick='createTable();'/>
</form>

<div id="wrapper"></div>
</body>
</html>

下面是经过 PHP 处理后的最终输出（端口：24，列：6，行：2，超级：2）：

桌子

这是我放在一起的一个 js 小提琴：http: //jsfiddle.net/9SnLB/

目前，当我单击按钮时没有任何反应，但是，我想这是我的第一个问题，但我是否正确进行设置？为什么按钮不运行该功能？

4

3 回答 3

3

两个错误。一个你没有关闭函数括号，即最后缺少 }。第二个是您使用 $row 而不是您创建的变量 num_rows。由于某种原因，它在小提琴中不起作用，但是它在本地起作用。小提琴是说 createTable 函数是未定义的。

function createTable()
{
    var num_ports = document.getElementById('ports').value;
    var num_super = document.getElementById('super').value;
    var num_rows = document.getElementById('rows').value;
    var num_cols = document.getElementById('cols').value;
    var tbody = '';
    var colStart = num_cols / num_super;
    for( var i=0; i<num_super; i++){
        var theader = '<div><table border="1">\n';
            for($u=1; $u<=num_rows; $u++){
              tbody += '<tr>';
                for( var j=0; j<colStart; j++)
                {
                tbody += '<td>';
                tbody += 'Cell ' + i + ',' + j;
                tbody += '</td>'
                }
        tbody += '</tr>\n';
    }
    var tfooter = '</table></div>';
    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
}
于 2013-01-28T02:29:12.970 回答
1 
var table = [["a1","a2","a3"]["b1","b2","b3"]["c1","c2","c3"]];
for(x = table.length;x > 0;x--) {
  document.write("<tr>");
  for(y = table[x].length;y > 0;y--) {
    document.write("<td>"+y+"</td>");
  }
document.write("</tr>");
}

对不起，如果语法错误。你明白了。

于 2013-01-28T02:31:06.220 回答
1

您需要将 jsFiddle 框架更改为“no wrap (head)”并更正 javascript 中的错误。“no wrap (head)”将允许访问该功能。"for ($u=1" 循环缺少右括号，$row 应该是 num_rows。"for (j=0" 循环缺少最后一个 "tbody=" 的分号。

这是更正的js。

function createTable() {
var num_ports = document.getElementById('ports').value;
var num_super = document.getElementById('super').value;
var num_rows = document.getElementById('rows').value;
var num_cols = document.getElementById('cols').value;
var tbody = '';
var colStart = num_cols / num_super;
for (var i = 0; i < num_super; i++) {
    var theader = '<div><table border="1">\n';
    for ($u = 1; $u <= num_rows; $u++) {
        tbody += '<tr>';
        for (var j = 0; j < colStart; j++) {
            tbody += '<td>';
            tbody += 'Cell ' + i + ',' + j;
            tbody += '</td>';
        }
    }
    tbody += '</tr>\n';
}
var tfooter = '</table></div>';
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;

}

于 2013-01-28T03:04:14.787 回答