Generate a .row.cells row for every <tr> element's length

Question

Generate a .row.cells row for every <tr> element's length

Greetings, I am interested in creating a script that can dynamically generate code based on the number of table rows it finds. Let me explain with an example:

Let's say I have a piece of code that calculates the number of table rows (excluding the table header) when I click a button:

var rowCount = $('#items-table tr').length - 1;

What I aim to achieve is, if the count I get is 3, I want to replicate these lines of code and update the variables and numbers within them accordingly.

Here are the initial lines of code I wish to duplicate:

table = document.getElementById("items-table");
var cell1 = table.rows[1].cells[0].innerHTML;
var cell2 = table.rows[1].cells[1].innerHTML;
var cell3 = table.rows[1].cells[2].innerHTML;

The goal is to modify the variable names so they can be defined later. For instance, if the count is 3, the output should look like this:

var cell1 = table.rows[1].cells[0].innerHTML;
var cell2 = table.rows[1].cells[1].innerHTML;
var cell3 = table.rows[1].cells[2].innerHTML;

var cell4 = table.rows[2].cells[0].innerHTML;
var cell5 = table.rows[2].cells[1].innerHTML;
var cell6 = table.rows[2].cells[2].innerHTML;

var cell7 = table.rows[3].cells[0].innerHTML;
var cell8 = table.rows[3].cells[1].innerHTML;
var cell9 = table.rows[3].cells[2].innerHTML;

How can I implement this? Furthermore, I would like to create a variable that can represent all the cell variables like this:

tableData = []   tableData.append(var cell7 = etc..)

This way, I could store the table data and retrieve it using localStorage in another HTML file. Additionally, I also intend to save the individual cell variables for future use:

localStorage.setItem("item-name-1", cell1);

Any suggestions on how I could accomplish this task are welcome. Thank you in advance.

Important Note: Initially, the table on my HTML page is empty. The data is then populated using inputs and an add button.

javascript jquery html css jquery-ui

Answer 1

Answer №1

Utilize an array and a variable:

let table, cell, index, row, totalRows;
table = document.getElementById("items-table");
totalRows = table.rows.length;

for (index = 0, row = 0, cell = []; row < totalRows; index++, row++) {
  cell[index] = table.rows[row].cells[0].innerHTML;
  cell[index+1] = table.rows[row].cells[1].innerHTML;
  cell[index+2] = table.rows[row].cells[2].innerHTML;
}

Subsequently, the first cell will be stored in cell[0], the second in cell[1], and so on. For instance, document.write(cell[0]) will display "Item" (retrieved from your previous inquiry).

document.write(cell[1]) will show "Size".

document.write(cell[3]) will depict the initial cell of the second row.

Answer 2

Utilize an array and a variable:

let table, cell, index, row, totalRows;
table = document.getElementById("items-table");
totalRows = table.rows.length;

for (index = 0, row = 0, cell = []; row < totalRows; index++, row++) {
  cell[index] = table.rows[row].cells[0].innerHTML;
  cell[index+1] = table.rows[row].cells[1].innerHTML;
  cell[index+2] = table.rows[row].cells[2].innerHTML;
}

Subsequently, the first cell will be stored in cell[0], the second in cell[1], and so on. For instance, document.write(cell[0]) will display "Item" (retrieved from your previous inquiry).

document.write(cell[1]) will show "Size".

document.write(cell[3]) will depict the initial cell of the second row.

Answer 3

Answer №2

You need to find an array, which in this case would likely be an array of arrays:

let cells = Array.prototype.map.call(document.getElementById("items-table").rows, row => {
    return Array.prototype.map.call(row.cells, cell => cell.innerHTML);
});

Check out this Live Example:

let cells = Array.prototype.map.call(document.getElementById("items-table").rows, row => {
    return Array.prototype.map.call(row.cells, cell => cell.innerHTML);
});
console.log("cells:", cells);

.as-console-wrapper {
  max-height: 100% !important;
}

<table id="items-table">
  <tbody>
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td>Row 1 Cell 3</td>
    </tr>
    <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td>Row 2 Cell 3</td>
    </tr>
    <tr>
      <td>Row 3 Cell 1</td>
      <td>Row 3 Cell 2</td>
      <td>Row 3 Cell 3</td>
    </tr>
    <tr>
      <td>Row 4 Cell 1</td>
      <td>Row 4 Cell 2</td>
      <td>Row 4 Cell 3</td>
    </tr>
  </tbody>
</table>

The part with Array.prototype.map.call enables us to use map function from Array on rows and cells, even though they are not arrays but have similar properties. Alternatively, you can convert them into arrays using Array.from:

let cells = Array.from(document.getElementById("items-table").rows).map(row => {
    return Array.from(row.cells).map(cell => cell.innerHTML);
});

Here is a Live Example:

let cells = Array.from(document.getElementById("items-table").rows).map(row => {
    return Array.from(row.cells).map(cell => cell.innerHTML);
});
console.log("cells:", cells);

.as-console-wrapper {
  max-height: 100% !important;
}

<table id="items-table">
  <tbody>
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td>Row 1 Cell 3</td>
    </tr>
    <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td>Row 2 Cell 3</td>
    </tr>
    <tr>
      <td>Row 3 Cell 1</td>
      <td>Row 3 Cell 2</td>
      <td>Row 3 Cell 3</td>
    </tr>
    <tr>
      <td>Row 4 Cell 1</td>
      <td>Row 4 Cell 2</td>
      <td>Row 4 Cell 3</td>
    </tr>
  </tbody>
</table>

To store this data in local storage, simply use JSON.stringify:

localStorage.setItem("tableData", JSON.stringify(cells));

For retrieval from local storage:

var cells = JSON.parse(localStorage.getItem("tableData") || "[]");

(The || "[]" adds a default empty array when there is no stored tableData.)

Answer 4

You need to find an array, which in this case would likely be an array of arrays:

let cells = Array.prototype.map.call(document.getElementById("items-table").rows, row => {
    return Array.prototype.map.call(row.cells, cell => cell.innerHTML);
});

Check out this Live Example:

let cells = Array.prototype.map.call(document.getElementById("items-table").rows, row => {
    return Array.prototype.map.call(row.cells, cell => cell.innerHTML);
});
console.log("cells:", cells);

.as-console-wrapper {
  max-height: 100% !important;
}

<table id="items-table">
  <tbody>
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td>Row 1 Cell 3</td>
    </tr>
    <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td>Row 2 Cell 3</td>
    </tr>
    <tr>
      <td>Row 3 Cell 1</td>
      <td>Row 3 Cell 2</td>
      <td>Row 3 Cell 3</td>
    </tr>
    <tr>
      <td>Row 4 Cell 1</td>
      <td>Row 4 Cell 2</td>
      <td>Row 4 Cell 3</td>
    </tr>
  </tbody>
</table>

The part with Array.prototype.map.call enables us to use map function from Array on rows and cells, even though they are not arrays but have similar properties. Alternatively, you can convert them into arrays using Array.from:

let cells = Array.from(document.getElementById("items-table").rows).map(row => {
    return Array.from(row.cells).map(cell => cell.innerHTML);
});

Here is a Live Example:

let cells = Array.from(document.getElementById("items-table").rows).map(row => {
    return Array.from(row.cells).map(cell => cell.innerHTML);
});
console.log("cells:", cells);

.as-console-wrapper {
  max-height: 100% !important;
}

<table id="items-table">
  <tbody>
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td>Row 1 Cell 3</td>
    </tr>
    <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td>Row 2 Cell 3</td>
    </tr>
    <tr>
      <td>Row 3 Cell 1</td>
      <td>Row 3 Cell 2</td>
      <td>Row 3 Cell 3</td>
    </tr>
    <tr>
      <td>Row 4 Cell 1</td>
      <td>Row 4 Cell 2</td>
      <td>Row 4 Cell 3</td>
    </tr>
  </tbody>
</table>

To store this data in local storage, simply use JSON.stringify:

localStorage.setItem("tableData", JSON.stringify(cells));

For retrieval from local storage:

var cells = JSON.parse(localStorage.getItem("tableData") || "[]");

(The || "[]" adds a default empty array when there is no stored tableData.)

Generate a .row.cells row for every <tr> element's length

Answer №1

Answer №2

Similar questions

What is the reasoning behind using the IIFE pattern on certain straightforward member functions in three.js?

Is there a way to preserve the HTML template code as it is when saving it in a cell?

Ensure that the display is set to block to stack the input elements on top of each other

Navigating the itemlist HTML to extract and manipulate data in a Flask application

The transparency effect on the overlaying image gradually diminishes as the images transition in the jQuery slideshow on Internet

Conceal all columns apart from the first when expanding/collapsing a table using

The browser is not showing JavaScript alerts and prompts when they are called inside a function

Executing asynchronous code in a sequential manner

What is the best way to eliminate the gap between the dropdown-toggle button and dropdown-menu items?

Comprehension of async/await and the concept of promises

Can you provide tips on how to center the title on the page?

"Utilizing Express.js and PHP for Streamlined Functionality

The Battle: TypeScript versus JSX

Eliminate the commas when listing Google Places types

What is preventing the mat-slide-toggle from being moved inside the form tags?

The animation does not seem to be functioning when applied to the input type button; however, it is

How can I design a search box similar to the one on the android.com website?

Is it possible to link a css file from an ascx control during registration?

Is there a way to display the next/previous buttons separately from the scroller in my jQuery thumbnail scroller implementation?

Is there a way to display a sub-menu while scrolling through a sub menu?