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:
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?
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.
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
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?
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.
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.
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
querySelector("#some_id")
with jQuery it’s
$("#some_id")
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);