Populate a table with data from a different table using JavaScript

On my webpage, I have a grid of selectable divs that are defined by rows and columns. When I select certain divs, it creates what I'll call "table Copy", a three-dimensional table.

If I select different elements, another three-dimensional table called "table Paste" is created.

The first time I select two columns and two rows, the table looks like this:


   x,y - positions
   at1,at2,at3 - attributes for later copy

                             Table Copy
                          1                2
                0:[x,y,at1,at2,at3],[x,y,at1,at2,at3]
                1:[x,y,at1,at2,at3],[x,y,at1,at2,at3]

When three columns with three rows are selected, the tables look like this:


                             Table Copy
                          1                2
                0:[x,y,at1,at2,at3],[x,y,at1,at2,at3]
                1:[x,y,at1,at2,at3],[x,y,at1,at2,at3]

                             Table Paste
                  1                2                 3               
       0:[x,y,at1,at2,at3],[x,y,at1,at2,at3],[x,y,at1,at2,at3]
       1:[x,y,at1,at2,at3],[x,y,at1,at2,at3],[x,y,at1,at2,at3]
       2:[x,y,at1,at2,at3],[x,y,at1,at2,at3],[x,y,at1,at2,at3]

I now require a function to fill the contents of table paste with the content from table copy:


                             Table Paste
                  1                2                 3               
            0:[tabCopy[0][1]],[tabCopy[0][2]],[tabCopy[0][1]]
            1:[tabCopy[1][1]],[tabCopy[1][1]],[tabCopy[1][1]]
            2:[tabCopy[0][1]],[tabCopy[0][2]],[tabCopy[0][1]]

There are various possibilities for the sizes of both arrays.

If table Copy has 4 rows and table Paste only has 3, then the fourth row of table Copy should be 'ignored'.

If table Copy has only 1 row and 1 column, all records in table Paste will be the same as well.

If table Paste has only 1 row and 1 column, it should take only the first record from table Copy.

I hope I've explained everything clearly :)

Thank you for your help!

Answer №1

Alright, let's break this down...

function moveData(source, destination) {
    for (var i = 0, j = 0; i < destination.length;
         i++, j = (j + 1) % source.length) {
        if ((source[j] instanceof Array) &&
            (destination[i] instanceof Array)) {
            moveData(source[j], destination[i]);
        } else {
            destination[i] = source[j];
        }
    }
}

var source = [["x", "y", "at1", "at2", "at3"],
            ["x", "y", "at1", "at2", "at3"],
            ["x", "y", "at1", "at2", "at3"],
            ["x", "y", "at1", "at2", "at3"]];

var destination = [["+", "-", "123", "456", "789"],
          ["+", "-", "123", "456", "789"],
          ["+", "-", "123", "456", "789"],
          ["+", "-", "123", "456", "789"],
          ["+", "-", "123", "456", "789"],
          ["+", "-", "123", "456", "789"],
          ["+", "-", "123", "456", "789"],
          ["+", "-", "123", "456", "789"],
          ["+", "-", "123", "456", "789"]];

Next:

moveData(source, destination);

You should expect:

[["x", "y", "at1", "at2", "at3"], 
 ["x", "y", "at1", "at2", "at3"], 
 ["x", "y", "at1", "at2", "at3"], 
 ["x", "y", "at1", "at2", "at3"], 
 ["x", "y", "at1", "at2", "at3"], 
 ["x", "y", "at1", "at2", "at3"], 
 ["x", "y", "at1", "at2", "at3"], 
 ["x", "y", "at1", "at2", "at3"], 
 ["x", "y", "at1", "at2", "at3"]]

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

Prevent deletion of already uploaded images in Blueimp by disabling the delete button

After using the blueimp upload script to upload files, I noticed that the file information is saved in a data table along with the upload timestamp. However, when I go to edit the form, the files reappear. The simple task I want to achieve is disabling th ...

Testing the selection of dropdown values in Angular2 using unit tests

I have a dropdown menu for selecting countries. It defaults to a pre-selected value, and when the user changes it, they are redirected to the corresponding country page. However, I am facing an issue while trying to unit test the default value in the sele ...

How to use Selenium to interact with an array of string elements and perform clicks

I have a String array that I obtain from either a text file or CSV. My goal is to use Selenium to click on each checkbox element corresponding to the elements in the array. The checkboxes follow this naming convention: 1.0.50.gecb16, 1.1.50.gecb16, 1.2. ...

JavaScript: Efficiently Replacing Multiple Text Instances

To ensure that users do not input multiple empty paragraphs in the text editor, I have found a method to eliminate a single <p><br></p> from the text within the editor message. var str = content.replace('<p><br></p> ...

Creating a basic live data visualization chart

Can anyone help me with fetching data from the database and plotting it into a real-time graph? I found an example here: The JSON structure is as follows: "networks": { "eth0": { "rx_bytes": 5338, "rx_dropped": 0, "rx_err ...

Animated jQuery carousel with a timer countdown feature

Currently, I am developing a jquery slider/carousel to display various promotions. I am seeking a method to indicate the time left until the next promotion appears. Similar to the flash promo on this website: Do you have any suggestions? ...

Incorporate JSON information into a sleek Bootstrap modal interface

I am looking to load a JSON file to generate a list within a Bootstrap Modal. The setup I have allows for the modal to appear when clicking on a person's image. <li class="project span3" data-type="pfa"> <a data-toggle="modal" data-targe ...

Issues with Bootstrap Contact Form submission

I found a helpful tutorial for creating a form at the following link: After following the tutorial, I added these scripts to the bottom of my contact form HTML: <script src='https://code.jquery.com/jquery-1.12.0.min.js'></script> ...

Is it advisable to approve automatic pull requests initiated by dependabot for updating the yarn.lock file?

I've recently received some pull requests from "dependabot" in a JavaScript library I am working on, like the one found here. While I appreciate the effort to update dependencies to newer versions, it seems strange that each PR only updates the versi ...

Issues arise with the escape key functionality when attempting to close an Angular modal

I have a component called Escrituracao that handles a client's billing information. It utilizes a mat-table to display all the necessary data. When creating a new bill, a modal window, known as CadastrarLancamentoComponent, is opened: openModalLancame ...

Grouping geoJSON data on Mapbox / Leaflet

I am currently in the process of setting up a clustered map on mapbox, similar to the example shown here: At the moment, my point data is being extracted from MYSQL and then converted into GeoJson using GeoPHP. You can view the current map setup here. I ...

Activate a button only when a value is inputted into a text box associated with a chosen radio button

I'm facing a challenge with my radio buttons and sub-options. When a user selects an option, the corresponding sub-options should be displayed. Additionally, I want to enable the next button only when text is entered in all sub-option text boxes for t ...

MongooseError: The parameter `uri` passed to the `openUri()` function must be of type string, but instead received "undefined"

Recently delving into mongo, I encountered a connection error that has me stumped. The error message reads as follows: MongooseError: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose ...

The function array_search will not provide a result when the key is set to 1

I encountered an interesting issue with my session array. I stored some values in it and successfully printed them out. However, when I attempted to print the keys associated with these values, I faced a problem. The function would return the key for value ...

What is the best approach for scaling @material-ui Skeleton in a grid row with variable heights?

I am working on creating a grid of Avatar images with a transition state where I want to show a skeleton representation of the image. To achieve this, I am using @material-ui/lab/Skeleton. The issue I'm facing is that since my images are set to autos ...

Is it possible to organize MongoDB records that possess identical update timestamps?

My goal is to validate a route within my Express server using Supertest. This particular route retrieves data from a MongoDB, and the data is then sorted based on the updatedAt field. While attempting to test the order of the output, I encountered an issu ...

Injecting JavaScript object values into dynamically generated modal

I have a JavaScript object that contains various training courses. Each category includes multiple training courses, and each course is associated with a specific category. Currently, I am able to display the title and description of each category in a mo ...

Unable to modify a record using the 'findById' method and save() function while utilizing promises

I am in the process of developing a cinema application using Node.js and MongoDB with Mongoose. One specific requirement I have is to update the 'Show' model when a user places an order. The task involves adding the latest seats that were ordere ...

A step-by-step guide to extracting live data using cheerio and socketio

I am currently scraping data from a website using Cheerio. Can someone provide me with guidance on how to retrieve web data and automatically update it using socket communication when there are changes on the website? I want to make this process real-tim ...

Which characters are permissible for the id attribute to prevent the jQuery selector from throwing an exception?

I am facing a situation where the id attribute is inputted by an end user. For instance, if the id for a textbox is "11_=11" as entered by the user, then the HTML code will appear like this: <input type="text" id="11_=11"> The corresponding jQuery ...