-2

我制作的脚本循环并根据用户输入创建一个表，如果 super=2 那么应该有 2 个表在表中输出不同的数字，它工作得很好，除了它应该打印第一个表，然后当它做第二个时，它也会重印第一个..有什么想法吗？

代码：

<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;
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 = 1; 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>
</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>

我应该是什么样子：

应该看起来像

它的样子：

坏表

4

2 回答 2

2

就像评论说的 - 你清除了 tBody

var tbody = '';

在循环之前，但这只发生一次。因为它是在循环外声明的，并且从不重置为''，所以第一个表的内容仍然存在于第二个循环中，请尝试

for( var i = 1; i <= num_super; i++){
    var tbody = '';
    //...
于 2013-01-28T16:14:11.350 回答
0

这个给你

    <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';
                tbody = '';
                for(u = 1; u <= num_rows; u++){
                    tbody += '<tr>';
                    for( var j = 1; 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>
</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>

添加var tbody = '';

于 2013-01-28T16:17:52.780 回答