Fatal编程技术网

Javascript Can'；t创建2个表

javascript html css

Javascript Can'；t创建2个表,javascript,html,css,Javascript,Html,Css,我正在尝试根据用户输入动态创建一个表，它工作得很好，但是，它应该根据用户提供的super输入创建一个表，因此如果super是2，那么它会循环创建两个表。然而，它所做的一切都不是这样，因为如果是这样，那么这些表将彼此相邻，而不是像我那样设置CSS。有什么想法吗 <script type="text/javascript"> function createTable() { var num_ports = document.getElementById('ports').value; v

我正在尝试根据用户输入动态创建一个表，它工作得很好，但是，它应该根据用户提供的
super
输入创建一个表，因此如果
super
是
2
，那么它会循环创建两个表。然而，它所做的一切都不是这样，因为如果是这样，那么这些表将彼此相邻，而不是像我那样设置CSS。有什么想法吗

<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;
var y = 1;
for( var i = 1; i <= num_super; i++){
    var theader = '<div style="margin:0 auto;"><table border="1" style="border:1px solid black; float:left;">\n';
        for(u = 1; u <= num_rows; u++){
          tbody += '<tr>';
            for( var j = 0; j < colStart; j++)
            {
            tbody += '<td style="width:80px; height:70px;">';
            tbody += '<sub style="float:right; position:relative; top:24px; z-index:11;  ">' + y + '</sub>';
            tbody += '</td>';
            y++;
            }
    tbody += '</tr>\n';
}
var tfooter = '</table></div>';
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
}
</script>

<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>


函数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\u cols/num\u super；
变量y=1；

对于（var i=1；i它将在此行的当前迭代中创建的表重置为新表：


document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;


你必须这样做：


document.getElementById('wrapper').innerHTML += theader + tbody + tfooter;


除了你的评论之外：


var colStart = num_cols / num_super;


mabe应为：


var colStart = num_cols * num_super;



表是块级的，请显示您的css和生成的htmlIt看起来好像您缺少一个花括号来关闭一个内部for循环。
因为我已经这样设置了css，您有吗？然后也显示css！@MattBurland抱歉复制了错误的版本，css在nowOr.append（）中可以添加到html@SpykeBytes我不熟悉本机JavaScript
.append（）
@Paul S。它在jQuery中，不是本机的。@th3falc0n修复了当前的问题so+1，但是现在它两次回显表1-6，一次回显表7-12，而不是一次回显。有什么想法吗？如果没有，我感谢您的帮助。在答案中添加了建议