使用Javascript动态创建html表 [英] Dynamically creating an html table with Javascript
问题描述
我正在尝试使用Javascript根据用户输入(实际上是两个或三个表，这取决于用户输入..)创建一个表，我非常熟悉PHP，并且已经可以在PHP中使用它，但是我会希望用户能够在查询表之前看到该表.我在这里找到了一个脚本，该脚本部分完成了我想要的工作，并尝试对其进行编辑(我发现它与PHP令人惊讶地相似)基本上，它计算按行和列将其拆分的单元格总数(端口)，超级"列如果用户希望将其拆分为多个表，这些表彼此并列，因此使用div标签，则使用.这是我的JS:
I am trying to create a table based on user input (actually two or three tables depending on the user input..) using Javascript, I am very much native to PHP and have already got this working in PHP, however i would like the user to be able to see the table before the query it. I found a script on here that partially did what I wanted and have attempted to edit it (I found it surprisingly similar to PHP) Basically it calculates the total amount of cells (ports) splits it by rows and columns, the "super" column is used if the user would like it to be split into multiple tables, which align next to each other, hence the div tag. Here's my 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，col:6，行:2，super:2):
Here is what the final output looks like after it has been processed by PHP (ports:24, col:6, rows:2, super:2):
这是我一起扔的js小提琴: http://jsfiddle.net/9SnLB/
Here is a js fiddle that I threw together: http://jsfiddle.net/9SnLB/
当前，当我单击按钮时没有任何反应，但是，我想这是我的第一个问题，但是我是否可以正确进行设置?为什么按钮不能运行该功能?
Currently, when I click the button nothing happens, but, I suppose that is my first issue, but am I going about the setup correctly? Why wont the button run the function?
推荐答案
两个错误.您没有关闭功能括号，即结尾处缺少}.第二个是您使用$ row而不是您创建的num_rows变量.由于某种原因，它在小提琴中不起作用，但是在本地起作用.小提琴在说createTable函数是未定义的.
Two mistakes. One you didn't close the function bracket, ie a missing } at the end. The second is you used $row instead of the variable you created num_rows. For some reason it doesn't work in the fiddle, it does however work locally. The fiddle is saying the createTable function is undefined.
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表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
