使用用户输入动态创建表 [英] Dynamically creating table with user input
本文介绍了使用用户输入动态创建表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在尝试使用JS和HTML动态创建表。
I'm currently trying to dynamically create a table using JS and HTML.
但目前似乎无法从用户条目中检索值。
But at the moment it cannot seem to retrieve the values from user entry.
我做错了什么？
提前致谢！
<script type="text/javascript">
function createTable(num_rows, numcols)
{
var num_rows = document.tablegen.rows.value;
var num_cols = document.tablegen.cols.value;
var theader = '<table>\n';
var tbody = '';
for( var i=0; i<num_rows;i++)
{
// create each row
tbody += '<tr>';
for( var j=0; j<num_cols;j++)
{
// create cell
tbody += '<td>';
tbody += 'Cell ' + i + ',' + j;
tbody += '</td>'
}
// closing row table
tbody += '</tr>\n';
}
var tfooter = '</table>';
// TO DO
return theader + tbody + tfooter;
}
</script>
</head>
<body>
<form name="tablegen">
<label>Rows: <input type="text" name="rows"/></label><br />
<label>Cols: <input type="text" name="cols"/></label><br/>
<input name="generate" type="button" value="Create Table!" onclick='createTable();'/>
</form>
<script type="text/javascript">
document.write(createTable());
</script>
推荐答案
我不建议使用document.write。阅读本文
I would not recommend to use document.write. read this
试试这个：
<script type="text/javascript">
function createTable()
{
var num_rows = document.getElementById('rows').value;
var num_cols = document.getElementById('cols').value;
var theader = '<table border="1">\n';
var tbody = '';
for( var i=0; i<num_rows;i++)
{
tbody += '<tr>';
for( var j=0; j<num_cols;j++)
{
tbody += '<td>';
tbody += 'Cell ' + i + ',' + j;
tbody += '</td>'
}
tbody += '</tr>\n';
}
var tfooter = '</table>';
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
</script>
</head>
<body>
<form name="tablegen">
<label>Rows: <input type="text" name="rows" id="rows"/></label><br />
<label>Cols: <input type="text" name="cols" id="cols"/></label><br/>
<input name="generate" type="button" value="Create Table!" onclick='createTable();'/>
</form>
<div id="wrapper"></div>
您还可以使用 insertRow 和 insertCell 。
了解详情：
https://developer.mozilla.org/en/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
http://www.w3schools.com/js/tryit .asp？filename = try_dom_table_insertrow
这篇关于使用用户输入动态创建表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
