Javascript：修改函数以动态创建表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19617163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: modify function to create table dynamically
提问by user2571510
I am pretty new to JavaScript and would like to use a function to insert a table into a form. So far I have the following code (working - except for the header) but am struggling with the following:
我对 JavaScript 很陌生，想使用一个函数将表格插入到表单中。到目前为止，我有以下代码（工作 - 除了标题）但我正在努力解决以下问题：
1) How can I use a prompt (popup) to ask for the needed table instead of using input fields like I have ? 2) How can I include the width (in %) here ? 3) How can I always add a table header ?
1）如何使用提示（弹出窗口）来询问所需的表格，而不是像我一样使用输入字段？2）如何在此处包含宽度（以％为单位）？3) 我怎样才能总是添加表头？
I hope someone here can help me to understand this.
我希望这里有人可以帮助我理解这一点。
My Code:
我的代码：
<html>
<head>
<script type="text/javascript">
function insertTable()
{
var num_rows = document.getElementById('rows').value;
var num_cols = document.getElementById('cols').value;
var theader = "<table id='table1'><thead></thead>";
var tbody = "";
for(var i = 0; i < num_rows; i++)
{
tbody += "<tr>";
for(var j = 0; j < num_cols; j++)
{
tbody += "<td>";
tbody += "?";
tbody += "</td>"
}
tbody += "</tr><br />";
}
var tfooter = "</table>";
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
</script>
<style>
#table1
{
border:solid 1px;
border-collapse:collapse;
width:100%;
}
#table1 td
{
border:solid 1px;
vertical-align:middle;
}
</style>
</head>
<body>
<form name="tableForm">
<label>Rows: <input type="text" name="rows" id="rows"/></label><br />
<label>Cols: <input type="text" name="cols" id="cols"/></label><br />
<label>Width (%): <input type="text" name="width" id="width"/></label><br />
<button type="button" onclick="insertTable()">Create Table</button>
<div id="wrapper"></div>
</form>
</body>
</html>
Thanks for any help with this, Tim
感谢您对此的任何帮助，蒂姆
回答by Swati
I have added few changes in the JS and CSS in your code. This would give you the header for each column and also will set the width of table in %
我在您的代码中的 JS 和 CSS 中添加了一些更改。这将为您提供每列的标题，并且还将以 % 为单位设置表格的宽度
To display the form in the pop-up, you can use any jquery plugin. The best jq plugin for pop-up is jquery-lightbox-me
要在弹出窗口中显示表单，您可以使用任何 jquery 插件。弹出窗口最好的 jq 插件是jquery-lightbox-me
<html>
<head>
<script type="text/javascript">
function insertTable()
{
var num_rows = document.getElementById('rows').value;
var num_cols = document.getElementById('cols').value;
var width = document.getElementById('width').value;
var theader = "<table id='table1' width = ' "+ width +"% '>";
var tbody = "";
for(var j = 0; j < num_cols; j++)
{
theader += "<th>header col "+ (j+1) +" </th>";
}
for(var i = 0; i < num_rows; i++)
{
tbody += "<tr>";
for(var j = 0; j < num_cols; j++)
{
tbody += "<td>";
tbody += "?";
tbody += "</td>"
}
tbody += "</tr><br />";
}
var tfooter = "</table>";
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
</script>
<style>
#table1
{
border:solid 1px;
border-collapse:collapse;
}
#table1 th
{
border:solid 1px;
border-collapse:collapse;
}
#table1 td
{
border:solid 1px;
vertical-align:middle;
}
</style>
</head>
<body>
<form name="tableForm">
<label>Rows: <input type="text" name="rows" id="rows"/></label><br />
<label>Cols: <input type="text" name="cols" id="cols"/></label><br />
<label>Width (%): <input type="text" name="width" id="width"/></label><br />
<button type="button" onclick="insertTable()">Create Table</button>
<div id="wrapper"></div>
</form>
</body>
</html>
Hope this would help you.
希望这会帮助你。
Thanks
谢谢
回答by Tarun Gupta
Let say I have a CSV, It should work
假设我有一个 CSV，它应该可以工作
Header1,Header2,Header3
1,2,3
4,5,6
var data = evt.target.result;
var delimiter = ',';
var escape = '\n';
var rows = data.split(escape);
var tbl = document.createElement('table');
tbl.style.width = '100%';
//tbl.setAttribute('border', '1', "green");
tbl.className = "table table-hover table-condensed dataTable";
var tbdy = document.createElement('tbody');
for (index in rows) {
var tr = document.createElement('tr'); // creating new row
var items = rows[index].split(delimiter);
for (itemindex in items) {
var td = "";
if (index == 0) {
td = document.createElement('th');
} else {
td = document.createElement('td');
}
td.appendChild(document.createTextNode(items[itemindex])); // creating new cell
tr.appendChild(td); // add to current tr
}
tbdy.appendChild(tr); // add new row (tr) to table
}
tbl.appendChild(tbdy);
document.getElementById('byte_content').appendChild(tbl);
回答by Jochen
Have a look at JQuery and the show() / hide() functions. You can use 'real' javascript-popups, but some browsers/browser-configurations won't open the new tab/window. Summing up, think about your use case, create all necessary div-containers and show exactly one div container on your page. You can find more about JQuery here http://www.w3schools.com/jquery/jquery_hide_show.aspand of course here http://api.jquery.com/show/. You are able to change the table-attributes and corresponding css with JQuery-functions as well.
看看 JQuery 和 show() / hide() 函数。您可以使用“真正的”javascript 弹出窗口，但某些浏览器/浏览器配置不会打开新选项卡/窗口。总而言之，考虑您的用例，创建所有必要的 div 容器并在您的页面上准确显示一个 div 容器。你可以在这里找到更多关于 JQuery 的信息http://www.w3schools.com/jquery/jquery_hide_show.asp当然这里 http://api.jquery.com/show/。您也可以使用 JQuery 函数更改表属性和相应的 css。
