Generating new tr elements and storing them using JavaScript

Question

Generating new tr elements and storing them using JavaScript

I'm relatively new to coding, especially when it comes to JS. I am currently working on a program that is designed to calculate input values and display the results (along with the date) in a table. Every time there is a new input, a new entry should be added to the table. Additionally, the table data should be saved and retrieved whenever the page is reloaded.

Currently, I am facing an issue where only the first entry is being saved. It is vital that all the data in the table gets saved. Does anyone have any suggestions or solutions for this problem? Thank you.

Below is the code snippet:

// your unique JavaScript code goes here

// your unique CSS code goes here

<html>
<head>
    <!-- your HTML code goes here -->
</head>
<body>
    <!-- your unique HTML content goes here -->
    <script src="your-script.js"></script>
</body>
</html>

You can also view the code on your website name.

javascript html css local-storage

Answer 1

Answer №1

Here is a basic structure for you to visualize how we can move forward if your requirements are clear. I have created two types of arrays, a simple array (dateArray and amountArray) along with dailyInputArray as an array of objects (dailyInput ). It's important to note that for improved security, it's recommended to store the data in a MySQL database. Due to potential restrictions when using localstorage, please ensure to test the code in your preferred code editor.

let amountArray=[]
let dateArray=[]
let dailyInput={}
let dailyInputArray=[]
let retrieveDailyInputValues = localStorage.getItem('DailyInputValues');
retrieveDailyInputValues = JSON.parse(retrieveDailyInputValues)
console.log(retrieveDailyInputValues)
if(retrieveDailyInputValues && retrieveDailyInputValues.length!=0){
    dailyInputArray=retrieveDailyInputValues
}else{
    dailyInputArray=[]
}
// rest of the JavaScript code goes here

*{
  box-sizing: border-box;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
/* Rest of the CSS styles */

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="veiwport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="FinanceTool.css">
    <title>Finance_Tool</title>
</head>
<body>
<main id="tool">
    <h1 class="heading">Simple Finance Tool</h1>
<p id="value-message-negative" class="value-message">Your number is negative. This will be calculated as a financial loss.</p>
<p id="value-message-positive" class="value-message">Your number is positive. This will be calculated as a financial gain.</p>
                            // HTML Code block continues

Answer 2

Here is a basic structure for you to visualize how we can move forward if your requirements are clear. I have created two types of arrays, a simple array (dateArray and amountArray) along with dailyInputArray as an array of objects (dailyInput ). It's important to note that for improved security, it's recommended to store the data in a MySQL database. Due to potential restrictions when using localstorage, please ensure to test the code in your preferred code editor.

let amountArray=[]
let dateArray=[]
let dailyInput={}
let dailyInputArray=[]
let retrieveDailyInputValues = localStorage.getItem('DailyInputValues');
retrieveDailyInputValues = JSON.parse(retrieveDailyInputValues)
console.log(retrieveDailyInputValues)
if(retrieveDailyInputValues && retrieveDailyInputValues.length!=0){
    dailyInputArray=retrieveDailyInputValues
}else{
    dailyInputArray=[]
}
// rest of the JavaScript code goes here

*{
  box-sizing: border-box;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
/* Rest of the CSS styles */

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="veiwport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="FinanceTool.css">
    <title>Finance_Tool</title>
</head>
<body>
<main id="tool">
    <h1 class="heading">Simple Finance Tool</h1>
<p id="value-message-negative" class="value-message">Your number is negative. This will be calculated as a financial loss.</p>
<p id="value-message-positive" class="value-message">Your number is positive. This will be calculated as a financial gain.</p>
                            // HTML Code block continues

Generating new tr elements and storing them using JavaScript

Answer №1

Similar questions

Global variable in Npm CLI

Creating a function to target a specific HTML class in Angular can be achieved by utilizing Angular

A guide on integrating Javascript and CSS files in Express.js

Beginner looking to create a rock, paper, scissors game using arrays in JavaScript

The success function is failing to display the Ajax response

Utilizing Prototype in Node.js Modules

Issues with jQuery toggle functionality have been reported specifically on the iPhone8 and other iOS devices

Preventing nested prototype methods from being transferred between objects in a WebWorker

Using Python to access files

Designing a website's layout with HTML and CSS

The Clash of Form Action and JavaScript

Techniques for Grouping an Array of Objects by a Specific Value Key in Angular

using jQuery to retrieve JSON data containing nested arrays

Manipulate HTML elements using JavaScript when a key is being held down

Tips for positioning text in front of images

find all the possible combinations of elements from multiple arrays

Using an array inside a for loop to follow the same structure

Looking to extract data from an HTML form?

Is there a different way to retrieve the tag name of an element besides using

Evaluate numerical values using xsl:choose function