JavaScript：每列生成表列
[英]JavaScript: generate table column per column
问题描述
I'm new to coding and I'm really stuck.
我是编码新手，我真的被困住了。 Here's the situation: I made a script to generate a unique table from multiple text areas, and that's working fine.情况是这样的：我编写了一个脚本来从多个文本区域生成一个唯一的表格，而且效果很好。 The problem is that I need to fill the table in a specific way:问题是我需要以特定方式填写表格：
- data from 1st textarea=1st Column来自第一个文本区域的数据=第一列
- data from 2nd textarea=2nd Column来自第二个文本区域的数据=第二列
- data from 3rd textarea=3rd Column来自第 3 个文本区域的数据=第 3 列
(but all the columns need to be part of the same table) Right now all the data from the 3 textAreas appears one below the other(in rows, not columns) and I just can't figure it out. （但所有列都需要属于同一个表的一部分）现在来自 3 个 textAreas 的所有数据都出现在另一个下方（在行中，而不是列中），我只是想不通。
So far, that's my script:到目前为止，这是我的脚本：
<script>
function generateTable() {
$('textarea').each(function(){
var data = $(this).val(); console.log(data);
var rows = data.split("\n");
var table = $('<table />');
for(var y in rows) {
var cells = rows[y].split("\t");
var row = $('<tr />');
for(var x in cells) {
row.append('<td>'+cells[x]+'</td>');
}
table.append(row);
}
$('#excel_table1').append(table);
})
}
</script>
That's my “body” with the text areas in divs:那是我在 div 中的文本区域的“正文”：
<div id=street> <p>street:</p>
<textarea name="data1" style="width:100px;height:20px;"></textarea>
</div>
<div id=city> <p>city:</p>
<textarea name="data2" style="width:200px;height:20px;"></textarea>
</div>
<div id=country> <p>country:</p>
<textarea name="data3" style="width:100px;height:20px;"></textarea>
</div>
<br>
<input id=bouton1 type="button" onclick="javascript:generateTable()" value="Generate
table"/>
And that's the table generated in a different "body":这就是在不同的“正文”中生成的表格：
<body><center>
<p>Table:</p>
<div id="excel_table1"></div>
</center></body>
Can Anyone help?任何人都可以帮忙吗？ The answer might be super easy, but I'm just trying to learn on the fly and know not much about JS: Thanks in advance :)答案可能非常简单，但我只是想快速学习并且对 JS 知之甚少：在此先感谢 :)
2 个解决方案
解决方案1
1 2020-04-22 18:20:29
There can only be one <body> element on your page.您的页面上只能有一个<body>元素。 So you would need to place both the textareas and the table in the same body element.因此，您需要将 textareas 和 table 放在同一个 body 元素中。
The problem with your script was that you created the table and appended it to your div for each textarea.您的脚本的问题是您创建了表格并将其附加到每个文本区域的 div 中。 You need to do this before and after iterating over the textareas.您需要在迭代 textareas 之前和之后执行此操作。
I've created a snippet changing just that.我创建了一个片段来改变它。 Hope this helps!希望这可以帮助！
function generateTable() { var table = $('<table></table>'); $('textarea').each(function() { var data = $(this).val(); console.log(data); var rows = data.split("\n"); for (var y in rows) { var cells = rows[y].split("\t"); var row = $('<tr />'); for (var x in cells) { row.append('<td>' + cells[x] + '</td>'); } table.append(row); } }) $('#excel_table1').append(table); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id=street> <p>street:</p> <textarea name="data1" style="width:100px;height:20px;"></textarea> </div> <div id=city> <p>city:</p> <textarea name="data2" style="width:200px;height:20px;"></textarea> </div> <div id=country> <p>country:</p> <textarea name="data3" style="width:100px;height:20px;"></textarea> </div> <br> <input id="bouton1" type="button" onclick="generateTable()" value="Generate table" /> <p>Table:</p> <div id="excel_table1"></div>
解决方案2
0 已采纳 2020-04-23 10:13:28
Never mind, I figured it out: :D没关系，我想通了：:D
Here's the script that takes data from multiple textareas and put it in different columns of the same table:这是从多个文本区域获取数据并将其放在同一个表的不同列中的脚本：
<script src="jquery-3.5.0.js" type="text/javascript" charset="utf-8"></script>
<script>
function generateTable() {
var n=1;
var rows=[];
var lng=0;
$('textarea').each(function(){
var data = $(this).val();
var rowData = data.split("\n");
rows[n] = rowData;
lng = rowData.length;
n++;
})
var table = $('<table />');
k=0;
while (k < lng) {
var row = $('<tr />');
for(var i = 1; i < rows.length; i++) {
var singleRow = rows[i];
row.append('<td>'+singleRow[k]+'</td>')
}
table.append(row);
k++;
}
$('#excel_table1').append(table);
}
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.