Javascript: iterate columns and output that to HTML-CodePudding

I've got a month of JS experience so I'm mostly useless beyond Hello, World! but Schmedtmann's course on Udemy has been really awesome. Here's what I'm trying to do:

User enters data where there will be n columns, with two rows of a start number and finish number, then the next column incremented 1. Like this:

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

The user will enter in number of columns, the starting number, and the range of the sequence. So something like this:

// 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);

Would produce something like this:

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

This is where my brain freezes. How do I iterate this thing?

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;
  }

In my limited understanding, it feels like I need to create an index or counter to increment this, or maybe an array, or maybe both? Can this be done in Vanilla JS?

FWIW, I eventually want to export this to excel, hence the columns, so I don't know if I need to consider that as well before moving forward. Thank you!

CodePudding user response：

Are you trying to create HTML, or just an output that you can use in Excel? If Excel, then you want to use CSV, which is also easier to create than all of those HTML elements. https://www.howtogeek.com/348960/what-is-a-csv-file-and-how-do-i-open-it/

I don't quite follow your "how do I iterate" question. You need to use a for loop that iterates over the values in the input. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement

Without writing the answer for you, does that make sense?

CodePudding user response：

Solution of this problem seems to be array of arrays, where each row can be considered a separate array that follows or gets generated using a pattern. Then the resulting arrays can be used to create an html table.

But its unclear how many rows you want to generate because the question says 2 and the sample codes shows 3, but however the solution can be can be scaled up to n number of rows.

*Please do read comments in the code.

// 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 >
  <div id="dynamicTable"></div>
</div>