Question

我正在尝试使用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处理后的最终输出（ports：24，col：6，rows：2，super：2）：

table

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

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

Answer 1

两个错误。一个你没有关闭功能支架，即最后一个缺失}。第二个是你使用$ 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;
}
}

Answer 2

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

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

Answer 3

您需要将jsFiddle框架更改为“no wrap（head）”并更正javascript中的错误。 “no wrap（head）”将允许访问该功能。 “for（$ u = 1”循环缺少close括号，$ 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;

}

使用Javascript动态创建html表

3 个答案: