The JavaScript Table Project: Array Functionality and Looping - Glitch Detected

Need help fixing an issue with a broken table that uses both 1 and 2 Dimensional Arrays along with for-loops.

Is there a way to ensure that "loanAmount[row]" is displayed only once in the leftmost column of the table?

function print2DArrayTable(this2DArray, title)
{
    //Creates the header of the table
    document.write("<table border='1' cellpadding='5'>");
    document.write("<tr><th colspan='8'>");
    document.write("<h2>" + title + "</h2>");
    document.write("</th></tr>")
    
    //Creates the Year headers on top of the table columns.
    document.write("<th></th>");
    for(x=0; x<numberOfYear.length; x++)
    {
        document.write("<th>" + numberOfYear[x] + "</th>");
    }
    
    for(row=0; row<this2DArray.length; row++)
    {  
        document.write("<tr>");
        for(col=0; col<this2DArray[0].length; col++)
        {
            document.write("<td>"+ loanAmount[row] +"</td>");
            document.write("<td>");
            document.write(this2DArray[row][col] + "  ");
            document.write("</td>");
        }
        document.write("</tr>");

    }
    document.write("</table>");
}/* end of print2DArraytable */

The first column displays correctly, but the following columns do not. Here is a snapshot of the issue:

Answer №1

Ensuring efficiency by moving the line that generates the first column outside of the inner loop.

for(row=0; row<this2DArray.length; row++)
  {  
     document.write("<tr>");

     // Rendering the first column only once per row
     document.write("<td>"+loanAmount[row]+"</td>");

     // Continuing to render the remaining columns
     for(col=0; col<this2DArray[0].length; col++)
     {

        document.write("<td>");
        document.write(this2DArray[row][col] + "&nbsp;&nbsp;");
        document.write("</td>");
     }
     document.write("</tr>");

  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Crafting a custom React Native button component with an asymmetrical design

I am trying to design a unique custom react native button that is slanted on one side. Despite reading numerous articles, I haven't found a solution that meets my specific requirements. Below are examples of how I would like the buttons to look – on ...

Solving the issue of redundant parentheses using JavaScript's regex

When I attempt to replace ...('2073')... with ....('2074')... I end up with ...(('2074'))... and I am perplexed as to why. Check out this javascript snippet: var sGroupIdentifier = "2073"; var sSelectedGroupTR = "... onclick ...

The CSS element remains inactive

Just starting out with Css and javascript, I'm currently engaged in a simple project (similar to a weekly task manager). On my text/html page, I have a navbar, 7 dynamic <ul> elements with "Add task" and "Delete Task buttons", and each <li> ...

Newbie in Distress: Help Required Due to Server Error

Currently working on the contacts page for a website and I need the div element to disappear once an email is successfully sent. In order to hide a Div element using Javascript, I created the following function: function hideDiv(){ document.getElement ...

There was an issue encountered while trying to install Electron using the command 'npm install electron'

While attempting to install electron using npm install electron, I encountered the following error: 908 error code 1 909 error path C:\Users\name\Documents\name\Code\code\node_modules\gl 910 error command failed ... ...

Exploring the functionality of window.matchmedia in React while incorporating Typescript

Recently, I have been working on implementing a dark mode toggle switch in React Typescript. In the past, I successfully built one using plain JavaScript along with useState and window.matchmedia('(prefers-color-scheme dark)').matches. However, w ...

Creating an API with an empty body using Express and Node.js

Currently, I am working on creating an API using Express in Node.js. The primary objective of this API is to receive a request containing a photo and then upload that photo to Firebase storage. However, I am facing a challenge where the body of the reque ...

What causes the index link to break when react-router's setRouteLeaveHook is used?

Issue: Whenever I include router.setRouteLeaveHook() or router.listenBefore() in my component, it causes the logo homepage Link to path="/" to break Scenario: I am attempting to implement a confirmation prompt before leaving a section. Below is the code f ...

Randomly switch out the wordpress header image at designated intervals

I have a custom header image on my website that displays 6 random images each time the site is visited. I am attempting to change this group of images while the user is browsing my site. Here is the code I am using: function show_banner(){ document.ge ...

Issue with generating random cells in a table using a loop

Within my HTML code, I have a table constructed using the table element. To achieve the goal of randomly selecting specific cells from this table, I implemented a JavaScript function that utilizes a for loop for iteration purposes. Despite setting the loop ...

Is there a way to divide a single array into two separate arrays based on a specific element?

My goal is to create an interactive graph using plotly.js. I have an array named data that contains all the information needed for the graph. However, I want users to be able to select specific elements to display on the graph. To achieve this functionalit ...

Experiencing a problem with the localhost connection

I've been trying to work on this issue using React and local host, but it keeps showing the direct file instead of the website. I've been stuck on this problem for the past 3-4 hours and still haven't been able to find a solution. I'm h ...

How can I eliminate the extra '/' in all links when building with webpack and vue?

I have a question that might seem silly to some, but it's really frustrating me. I am currently working on a project using Vue with vue-cli. this is the webpack build result <!DOCTYPE html> <html> <head> <meta charset=utf- ...

Ways to incorporate vector .svg images into a D3js tree diagram

var treeData = [ { "name": "Top Level", "parent": "null", "remark":"yes", "children": [ { "name": "Level 2: A", "parent": "Top Level", "remark":"yes", "children": [ { "name": "So ...

ASP.NET page experiences issues with executing Javascript or jQuery code

Having trouble with client scripts not functioning correctly on a child page that utilizes a master page. Looking for help to resolve this issue. <%@ Page Title="" Language="C#" MasterPageFile="~/Store.Master" AutoEventWireup="true" CodeBehind="NewSt ...

Rearrange the first division to the second division in a responsive manner

.box { display: block; width: 200px; height: 200px; padding: 20px; background: black; } .class1 { position: relative; color: red; } .class2 { position: relative; color: red; } <div class="box"> <div class="class1"> Th ...

When attempting to test an ExpressJS API, an error is encountered stating "Cannot read property 'address' of undefined."

After successfully starting the app, I am able to call my API with the following commands: "dev": "env-cmd ./.env nodemon ./src/index.js", "test": "env-cmd ./test.env jest --watch" In server.js: // Loading dependencies const app = express(); ... // Load ...

declaring a variable in JSP and incorporating it into jQuery

How can I retrieve the size of options in a route object and store it in a variable in JSP? I then need to access this variable in jQuery. Any suggestions on how to achieve this? JSP code : <%!int loopSize = routes.get(0).getOptions().size(); %> ...

Can you explain the mechanics behind the animation of the upvote button on steemit.com?

Behold the upvote button of steemit.com: <span class="Icon chevron-up-circle" style="display: inline-block; width: 1.12rem; height: 1.12rem;"> <svg enable-background="new 0 0 33 33" version="1.1" viewBox="0 0 33 33" xml:space="preserve" xmlns=" ...

Having trouble with Laravel routes and jQuery $.post()? Keep getting a frustrating 404 Not Found error?

A JavaScript file with jQuery that is responsible for sending a POST request $.post('log_in', { email: email, password: password }, function(response) { $('#log_in_result').html(response); console.log(response); }); In the Lar ...