Javascript:迭代列并将其输出到HTML

Question

我有一个月的JS经验，所以除了Hello, World!之外，我基本上没用，但Schmedtmann关于Udemy的课程真的很棒。以下是我要做的：

用户在将有n列的位置输入数据，其中有两行起始编号和结束编号，然后下一列递增++1。像这样：

1   2   3   4   5
1   101 201 301 401
100 200 300 400 500

用户将输入列数、起始编号和序列范围。这样的东西：

// total number of columns, ex "5"
let totalColumn = Number(totalColumnE1.value);
// the starting column number, ex. "3"
let columnNumber = Number(columnNumberE1.value);
// the start of the sequence, ex. "101"
let number = Number(numberE1.value);
// the range of each sequence, ex. "100"
let range = Number(rangeE1.value);

会产生这样的东西：

3   4   5   6   7
101 201 301 401 501
200 300 400 500 600

这就是我大脑冻结的地方。我该如何迭代这个东西？

if (columnNumber < totalColumn) {
let output = `<tr><td>Column ${columnNumber}</td></tr>
<tr><td>${number}</td></tr>
<tr><td>${number + range}</td></tr>`;
outputEl.innerHTML = output;
}

在我有限的理解中，感觉我需要创建一个索引或计数器来增加它，或者可能是一个数组，或者两者都有？这可以在VanillaJS中完成吗？

FWIW，我最终想将其导出到excel，因此导出列，所以我不知道在前进之前是否也需要考虑这一点。非常感谢。

Answer 1

您是在尝试创建HTML，还是只创建一个可以在Excel中使用的输出？如果是Excel，那么您希望使用CSV，它也比所有HTML元素更容易创建。https://www.howtogeek.com/348960/what-is-a-csv-file-and-how-do-i-open-it/

我不太理解你的"；我如何迭代"；问题您需要使用一个for循环来迭代输入中的值。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement

如果不给你写答案，这有意义吗？

Answer 2

这个问题的解决方案似乎是数组数组，其中每一行都可以被视为一个单独的数组，该数组跟随或使用模式生成。然后，生成的数组可以用于创建一个html表。

但是，由于问题显示为2，示例代码显示为3，因此不清楚您要生成多少行，但解决方案可以扩展到n行。

*请务必阅读代码中的注释。

// output array that will contain arrays of sequences
let outputArray = [];
// user input number of columns
let totalColNo = 5;
// user input column start number
let colStartNo = 3;
// user input range sequence start number
let rangeStartNo = 101;
// user input range for sequence
let rangeOfRange = 100;
// 1st sequence, col start
let colStartSequence = [];
// 2nd sequence, range
let rangeSequence = [];
// generate 1st sequence of arrays i.e. [3, 4, 5, 6, 7]
for (let i = 1; i <= totalColNo; i++) {
colStartSequence.push(colStartNo);
colStartNo += 1;
}
// generate 2nd sequence of arrays i.e. [101, 201, 301, 401, 501]
for (let i = 1; i <= totalColNo; i++) {
rangeSequence.push(rangeStartNo);
rangeStartNo += rangeOfRange;
}
// pushing arrays to output array
outputArray = [colStartSequence, rangeSequence];
// console.log(outputArray);
// Html
// select parent id
const parentId = document.getElementById("dynamicTable");
// a function that will accept our 'outputArray' and create and populate the table
function createTable(tableData) {
const table = document.createElement("table");
const tBody = document.createElement("tbody");
// number of rows will be created according to 'outputArray.length'
tableData.forEach(function(rowData) {
const row = document.createElement("tr");
// number of columns will be created according to 'totalColNo' variable
rowData.forEach(function(cellData) {
const cell = document.createElement("td");
cell.appendChild(document.createTextNode(cellData));
row.appendChild(cell);
});
tBody.appendChild(row);
});
table.appendChild(tBody);
table.border = 1;
parentId.appendChild(table);
}
createTable(outputArray);

<div class="container">
<div id="dynamicTable"></div>
</div>