Creating a table and populating its cells with values all within the confines of a single function

Question

Creating a table and populating its cells with values all within the confines of a single function

This section of code aims to create 3 arrays by extracting values inputted by the user from a popup menu in the HTML file. These values are then utilized to populate the table displayed below.

var arrM = new Array;      var arrT = new Array;         var arrA = new Array; 
arrM[0] = mod0.mod.value;  arrT[0] = mod0.target.value;  arrA[0] = mod0.actual.value; 
arrM[1] = mod1.mod.value;  arrT[1] = mod1.target.value;  arrA[1] = mod1.actual.value; 
arrM[2] = mod2.mod.value;  arrT[2] = mod2.target.value;  arrA[2] = mod2.actual.value; 
arrM[3] = mod3.mod.value;  arrT[3] = mod3.target.value;  arrA[3] = mod3.actual.value; 
arrM[4] = mod4.mod.value;  arrT[4] = mod4.target.value;  arrA[4] = mod4.actual.value; 
arrM[5] = mod5.mod.value;  arrT[5] = mod5.target.value;  arrA[5] = mod5.actual.value; 
arrM[6] = mod6.mod.value;  arrT[6] = mod6.target.value;  arrA[6] = mod6.actual.value; 
arrM[7] = mod7.mod.value;  arrT[7] = mod7.target.value;  arrA[7] = mod7.actual.value; 
arrM[8] = mod8.mod.value;  arrT[8] = mod8.target.value;  arrA[8] = mod8.actual.value; 
arrM[9] = mod9.mod.value;  arrT[9] = mod9.target.value;  arrA[9] = mod9.actual.value;

The section between the codes above and below (not shown here) is solely for calculating average values and does not interact with the subsequent block.

Next, there is another piece of code responsible for generating a table with rows equal to the number filled out by the user in the popup menu.

var tableGenerator = document.getElementById("tableGenerator");
tbl = document.createElement('table');
tbl.style.width = '500px';
tbl.style.height = '100px';
tbl.style.border = '1px solid black';
tbl.style.margin = '50px';
tbl.style.float = 'left';
if (j < 6) {
    j = 6;
}
for (var a = 0; a < j+1; a++) {
    var tr = tbl.insertRow();
    for (var b = 0; b < 3; b++) {
        if (a == j && b == 3) {
            break;
        } else {
            var td = tr.insertCell();
            td.appendChild(document.createTextNode(""));
            td.style.border = '1px solid black';
            if (a == 0 && b == 0) {
                var newtext = document.createTextNode(Text);
                var celltext = "Year   " + year.value + "  Semester   " + semester.value;
                td.appendChild(document.createTextNode(celltext));
                td.setAttribute('colSpan', '3'); break;
            }
//the following else block is just a template concept that needs implementation to function correctly
              else {
                for (a = 1; a < j; a++) {
                    tbl[a][0] = arrM[a];
                    tbl[a][1] = arrT[a];
                    tbl[a][2] = arrA[a];
                }
            }
        }
    }
}tableGenerator.appendChild(tbl);

I have limited experience with HTML/JS/CSS. Is there any way to access table cell values as if they were an array? Or perhaps there's a more efficient approach to achieve this?

javascript html-table

Answer 1

Answer №1

To manipulate table cells in JavaScript, you have a few options. You can either create text nodes and set their content, or use the textContent, innerText, or innerHTML properties to assign values to the cells.

td.textContent = 'Hello'; // Use this property for setting text content.

A good approach is structuring your data in an array that can be looped over. This allows you to perform the same actions in a specific order. For instance:

var data = [
  arrM,
  arrT,
  arrA
];

This way, your arrays are nested within another array. You can then iterate over the data array to create a table row for each array, and a table cell for each item inside the nested arrays.

for (var i = 0; i < data.length; i++) {
  // ... create table row.
  for (var j = 0; j < data[i].length; j++) {
    // ... create table cell and set textContent property.
  }
}

Below is a working example of the concept explained above. It demonstrates how to create a dynamic table using JavaScript. I hope this clarifies the process for you.

function createTable(headers, values) {
  var table = document.createElement('table');
  
  // Build <thead>
  var tableHeader = table.createTHead();
  
  // Create <tr> inside <thead>
  var tableHeaderRow = tableHeader.insertRow();
  for (var i = 0; i < headers.length; i++) {
    // Create <th>
    var tableHeaderCell = document.createElement('th');
    
    // Assign header value from array to <th>
    tableHeaderCell.textContent = headers[i];
    
    // Append <th> to <tr> within <thead>
    tableHeaderRow.appendChild(tableHeaderCell);
  }

  // Build <tbody>
  var tableBody = table.createTBody();
  for (var j = 0; j < values.length; j++) {
    // Create <tr> inside <tbody>
    var tableBodyRow = tableBody.insertRow();

    for (var k = 0; k < values[j].length; k++) {
      // Create <td> inside <tr>
      var tableBodyCell = tableBodyRow.insertCell();
      
      // Set text of <td> to value in array.
      tableBodyCell.textContent = values[j][k];
    }
  }

  // Add <table> to the <body>
  document.body.appendChild(table);
}

var titles = [
  'One',
  'Two',
  'Three'
];

var characters = [
  ['Batman', 'Robin', 'Batgirl'],
  ['Joker', 'Two-Face', 'Poison Ivy'],
  ['James Gordon', 'Alfred Pennyworth', 'Clayface']
];

createTable(titles, characters);

Answer 2

To manipulate table cells in JavaScript, you have a few options. You can either create text nodes and set their content, or use the textContent, innerText, or innerHTML properties to assign values to the cells.

td.textContent = 'Hello'; // Use this property for setting text content.

A good approach is structuring your data in an array that can be looped over. This allows you to perform the same actions in a specific order. For instance:

var data = [
  arrM,
  arrT,
  arrA
];

This way, your arrays are nested within another array. You can then iterate over the data array to create a table row for each array, and a table cell for each item inside the nested arrays.

for (var i = 0; i < data.length; i++) {
  // ... create table row.
  for (var j = 0; j < data[i].length; j++) {
    // ... create table cell and set textContent property.
  }
}

Below is a working example of the concept explained above. It demonstrates how to create a dynamic table using JavaScript. I hope this clarifies the process for you.

function createTable(headers, values) {
  var table = document.createElement('table');
  
  // Build <thead>
  var tableHeader = table.createTHead();
  
  // Create <tr> inside <thead>
  var tableHeaderRow = tableHeader.insertRow();
  for (var i = 0; i < headers.length; i++) {
    // Create <th>
    var tableHeaderCell = document.createElement('th');
    
    // Assign header value from array to <th>
    tableHeaderCell.textContent = headers[i];
    
    // Append <th> to <tr> within <thead>
    tableHeaderRow.appendChild(tableHeaderCell);
  }

  // Build <tbody>
  var tableBody = table.createTBody();
  for (var j = 0; j < values.length; j++) {
    // Create <tr> inside <tbody>
    var tableBodyRow = tableBody.insertRow();

    for (var k = 0; k < values[j].length; k++) {
      // Create <td> inside <tr>
      var tableBodyCell = tableBodyRow.insertCell();
      
      // Set text of <td> to value in array.
      tableBodyCell.textContent = values[j][k];
    }
  }

  // Add <table> to the <body>
  document.body.appendChild(table);
}

var titles = [
  'One',
  'Two',
  'Three'
];

var characters = [
  ['Batman', 'Robin', 'Batgirl'],
  ['Joker', 'Two-Face', 'Poison Ivy'],
  ['James Gordon', 'Alfred Pennyworth', 'Clayface']
];

createTable(titles, characters);

Creating a table and populating its cells with values all within the confines of a single function

Answer №1

Similar questions

What is the process for assigning a serial number to each row in the MUI DataGrid?

Display Material Popup in Angular before user leaves the page

Creating audio streams using react-player

Steps for submitting a form once all inputs have been verified

Enable or disable dropdown based on selected radio button status

Moving through divisions that share a common class name using jquery

How odd! Using window.location or location.replace redirects to the page and then reverses back!

"Displaying a popup message prompting users to refresh the page after clicking

"Please ensure that the field values in MessageEmbed are not left empty" stated discord.js

Adjust the jQuery and PHP script to retrieve both the ID and text content to populate an OPTION element

Angular.js: Applying a style to elements beyond the current scope based on the selected route

Artwork expanding incorrectly on HTML canvas

Encountering a Node.js issue when attempting to properly sanitize data before inserting it into MySQL

Utilizing multiple class names in Material UI with identical definitions

What is the best way to ensure a bottom tooltip stays perfectly aligned with the right edge of its corresponding element?

Modify the contents of a textbox by editing the text as you type

Sorting functionality malfunctioning after dynamically adding new content using AJAX

Updating data in a table upon submission of a form in Rails

Obtain the bounding box of an SVG element while it is not visible

What are the steps for leveraging a proxy with NodeJS and Selenium?