Generate Table Rows with Javascript - produces an excess of cells...>>

I am currently in the process of dynamically creating a table, but I am facing an issue with the number of cells being added.

The table I am trying to create has a total of 8 columns (Monday to Friday and a total column at the end).

You can view my progress on this fiddle: http://jsfiddle.net/kaf9qmh0/

As you can see, there seems to be a problem where it adds 8 columns three times on row one, then two times on row two, before finally correctly adding only 8 columns on the last row.

My suspicion is that the issue lies in how I am using the .append method to add rows (line 105 in the fiddle), but due to my limited knowledge in Javascript, I am unsure about how to prevent the additional columns from being added to row 1 and row 2.

$("#timesheetTable > tbody").append('<tr id="' + sourceTableRowID + '" data-tt-id="' + sourceTableRowID + '" class="timesheetRow row' + rowIndex2 + '"></tr>');

Could someone offer guidance on how I can ensure that the cells (td) are only added to the next row when looping through rowIndex2 and incrementing it?

Any assistance in pointing me in the right direction would be greatly appreciated.

javascripthtml-table

Answer №1

Your previous code had a nested loop which was causing extra cells to be created. Here is an updated version with the necessary modifications:

function createSampleRows() {
    var sourceTable = document.getElementById('activityTable');
    var sourceTableRows = sourceTable.rows.length;
    var targetTable = document.getElementById('timesheetTable');
    var rowindex;
    var targetTableColCount;

    for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++) {
        if (rowIndex == 1) {
           targetTableColCount = targetTable.rows.item(rowIndex).cells.length;
           continue; //skipping further execution for header row
        }
    }
    for (rowIndex = 0; rowIndex < (parseInt(sourceTableRows)-2); rowIndex++) {
        var sourceTableRowID = document.getElementsByClassName('activityTaskRow')[rowIndex].id;
        $("#timesheetTable > tbody").append('<tr id="' + sourceTableRowID + '" data-tt-id="' + sourceTableRowID + '" class="timesheetRow row' + rowIndex + '"></tr>');
    };

    // The following loop is now outside of the nested loop
    for (x = 0; x < targetTableColCount; x++) {
        $("#timesheetTable > tbody > tr").append('<td id="' + x + '" style="width: 60px;height: 34px;" class=""></td>');
    };
};

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

Sending data from JavaScript to PHP in the same function

Currently, I am encountering an issue related to passing JavaScript variables to PHP within the same function. Here is a snippet of my code: else if(msg_type[i] == 'code' ){ var code_action = 'test'; <?php function foob ...

javascriptphpvariables

The Angular-ui typeahead feature is delivering accurate results when the backspace key is pressed

I've been using Angular-UI typeahead and it's been working fine, but I've noticed a strange behavior when I hit the backspace key - it gives the correct results. For example, if I type sector 4 The result is Sector 1 Sector 2 ...

javascriptangularjsangular-uiangular-ui-typeahead

"Is it possible to include a button for horizontal scrolling in the table

I have a bootstrap table with overflowing set to auto within its container, along with a locked first column. While a horizontal scroll bar allows for viewing additional data, I am looking to incorporate buttons for navigation as well. Users should have th ...

javascripthtmlcssbootstrap-4

Sharing server object in expressJS with another file through module.exports

As I work on my expressJS app, I encountered a situation where I needed to share the server object with another file. To achieve this, I decided to create the server in my app.js file and then expose it to one of my routes. var server = http.createServer( ...

javascriptexpressrequire

Ways to manage properties that are non-existent

Whenever vm8 encounters a property that doesn't exist, it will display an error message like this: Cannot read property 'value' of null. For example, when passing an id that doesn't exist: var pass = document.getElementById('pass ...

javascript

Creating an array of logos in ReactJS with the help of TailwindCSS

After seeing multiple implementations of this feature, I find myself struggling to search for a solution. I can only access the HTML and CSS through inspecting elements, wondering if others are facing the same issue as me. Typically, we aim to implement t ...

javascriptcssreactjstailwind-css

The declaration file for module 'react-scroll-to-bottom' appears to be missing

I recently added react-scroll-to-bottom to my project and it is listed in my dependencies. However, I am encountering the following error: Could not find a declaration file for module 'react-scroll-to-bottom'. The path 'c:/Users/J/Desktop/w ...

javascriptreactjsreact-nativenpm

What is the proper way to retrieve multiple property values stored in a property name using getJSON

I'm having trouble getting multiple languages to work in my code. Could someone assist me and provide guidance on how to write multiple choices for the property name language? When I input code like this to display only Dota 2 games in English, every ...

javascriptjsongetjson

Executing npm run build index.html results in a blank page being generated without any error messages or warnings

After building my react app with npm run build, I encountered a problem where clicking on index.html resulted in a blank page opening in the web browser. I explored several solutions to address this issue but none seemed to work. Some of the strategies I ...

javascripthtmlreactjsnpm

Ways to adjust .keyup based on the presence of a variable

I am currently in the process of constructing a search form that utilizes an ajax function within .keyup, which may have various arguments. I aim to determine if a specific argument should be included based on the presence of another value. Here is my curr ...

javascriptjquery

A guide on how to efficiently retrieve all images stored in a specific directory

I attempted to showcase all the images from a single directory using jQuery, but unfortunately it is not functioning as expected. My folder setup includes an 'images' folder and a 'js' folder. I followed this question on Stack Overflow ...

javascriptjqueryhtml

Scrolling to does not function properly with Material UI tabs

Looking for a solution to scroll to a specific div when clicking on a tab in Material UI Tabs using UseRef and ScrollTo. Check out the sandbox link here: https://codesandbox.io/s/exciting-sound-mrw2v Currently, when I click on Tab 2, I expect it to autom ...

javascriptcssreactjsmaterial-ui

Angular 17: Issue with _HttpClient Provider Not Found in Standalone Component Utilizing ApiService

I have been developing a cutting-edge Angular 17 application that integrates the Spotify API using the innovative standalone component functionality. However, I am facing an issue while attempting to inject the HttpClient into a service. Despite meticulous ...

javascriptangularhttpclientangular16

Having trouble setting the image source in HTML with Node.js

I am a beginner with nodeJS and I am having trouble setting the src attribute of an img tag in my client side html. My node server is running on port 3000 and everything works fine when I visit http://localhost:3000. Here is the code from my server.js fil ...

javascripthtmlnode.jssocket.io

Is there a more efficient method for implementing server side rendering in a Next.js application?

Currently, I am implementing server-side rendering in my Next.js application. This specific component is responsible for returning HTML content. I'm wondering if there are more efficient methods available? import Feature from 'components/home/Fea ...

javascriptnext.jstypescript-typings

Vue.js encountered an uncaught TypeError while trying to execute the 'drawImage' function

I am facing an issue with my vue.js application where I can successfully apply a filter to a photo, but I am unable to post it. The error message I am encountering is: Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingCon ...

javascriptimagevue.jscanvasbase64

Creating an efficient login system for my website - where do I start?

I've recently started diving into the world of web development, starting with HTML, CSS, and a bit of JavaScript. However, I've hit a roadblock - while I can perform basic styling, I'm struggling to make my projects interactive. My main que ...

javascriptpythonphpcss

How can I set up flat-pickr for date and time input with Vue.js?

I'm currently working with flat-pickr. Let's dive into the configuration part of it. I have a start date field and an end date field. My goal is to make it so that when a time is selected in the start date field, it defaults to 12h AM, and when a ...

javascriptvue.js

Preventing a Click Event on Child Element from Triggering the Parent's Click Event in jQuery

Can you help me figure out how to prevent a button from executing the onclick function of its parent div in this example? <div onclick="$('#extra-info').slideToggle();" class="card card-body item"> <div class="ro ...

javascripthtmljqueryonclick

What is the best method to access an element with Vue.js?

I currently have a form set up like this <form v-on:submit.prevent="save_data(this)"></form> and a method defined in Vue.js like this methods: { save_data: function(f){ } } In jQuery, we can access the form using $(f)[0] My question ...

javascriptvue.js