Jquery Dynamic Table Fix

Hello Everyone,

I am trying to fix the code attached source code. It is a dynamic table that allows you to add data on the user interface. I am trying to add colors when a section is selected. For example like the image below:

It is currently like this:

The selection feature should work on the user interface.

Here is the source code:
Schedule Dym.zip (5.7 KB)


Please do not bump posts but instead try to add more information and clarification of the problem so others can see what you have tried and what you are aiming for exactly?

JS is not my area but if you simply want to color table cells then that is a css question.

I’m guessing that you should dynamically add a class to the cell that is selected and then you can let css do the colouring. However, it seems you are building some sort of complex interface and something as simple as colouring a cell should not be troublesome to you so I’ve probably missed the point?

I can tell you that your table is much to wide for its container and cannot think why you would give it a 160% width when the parent is an 800px fixed width?

1 Like

Sorry about that. But I am trying to create a dynamic table that can be edited on the user interface. It is kinda complicated to explain but the image below is exactly what I am trying except it has to be done on the user interface because information will be changed daily. The source code attached has errors which include the size of the table. But the size should be full paged with a padding of 10px.

Hi, I’m still uncertain as to what you want help with exactly. :slight_smile:

From your comments it looks like you want to build a whole calendar application that allows a user to edit and create entries that may span other rows and columns and then for those entries to be coloured accordingly.

If that is true then that’s too complicated for me and would probably take a competent programmer weeks to code from scratch!

If on the other hand you just want help with styling a table to look like your drawing then I can help with that but I can’t help with any dynamic aspects so someone else will need to jump in.

To get proper help you should set up a demo on codepen as most users here won’t like to open a zip as it’s time consuming and a little risky :slight_smile:

Thats Exactly What I want:

Code Pen Link: https://codepen.io/surajkay19/pen/LeWrgd

If possible whenever I write data in the cell can the cell be automatically colored? For example since its done on the user interface, if i enter “One” in a cell it should color that cell.

Also the cell are dynamically expanding when information is entered, How can i make it static?

Code Pen Link: https://codepen.io/surajkay19/pen/LeWrgd

@PaulOB @coothead

Yes you could add an event listener to the cell and when content is changed or updated apply a class to that cell and let CSS color it.

It seems to me that you are trying to build a very advanced application and it’s not going to be as simple as typing text into a cell. You probably need to have each cell set up with an input/textarea in order to gain user input and then receive and process that input (i.e. post the form to the backend) every time a cell is updated.

How are you managing the data you receive and update?

What skills do you possess in order to accomplish this task? Are you a programmer? What have you tried so far?

Colouring and fixing the size of the cells is the least of the issues and would be as simple as adding a class to the cell in question.

Sorry, if I’ve misunderstood but I’m not sure anyone here is going to build that from scratch for you but we will certainly try to help. I can show you how to create that table in pure html and css with the colours added but I don’t think that will help in the long run as you really need to have an idea of how to manage your data.

Maybe someone else can jump in here as I would be out of my depth with the dynamic aspects anyway.:slight_smile:

1 Like

Is there anyone that can help?

Hey paul is it possible for you to add even listener to this? https://codepen.io/surajkay19/pen/LeWrgd

Yes, you can add event listeners to DOM elements. You could assign a getElementById or querySelector return to a variable and then add event listener(s) to the element using that variable.

Looking at the complexity of the opening post of this topic and the JavaScript in that codepen, I have the feeling Alice has gone down the rabbit hole. What may help is to backtrack and post a minimal version that works and then explain what problem(s) you are having with the next step.

1 Like

I have a problem with adding event listener. I just don’t know who it works. Could you do an example in code pen if u have the time?

I usually prefer to not use jQuery, mainly because I’m more familiar with and more comfortable using “regular” JavaScript. Even when I do use jQuery, my code often is a mix of both and not “pure” jQuery. So I’m likely not the best here to offer help, but I’ll try.

One of the pluses of jQuery is that once you learn it shorter syntax can be used. For example, instead of


with jQuery it’s


and instead of

addEventListener("click", some_function) 

with jQuery it’s

on("click", some_function) 

Put together, the jQuery could be like

$("#some_id").on("click", some_function) 

compared to

var dom_element = document.querySelector("#some_id"); 
dom_element.addEventListener("click", some_function); 

There are several examples that can be seen here

1 Like

Well you can cheat. The following vanilla JavaScript code will work in most cases too:

some_id.onclick = some_function;

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.