Help creating editable tables

I haven’t been on FCC for awhile and it looks like the old forum is gone (true?). Anyway, I am hoping I can get someone to look over some code I’m having an issue with but I want to make sure it gets to the proper place for that. If anyone can point me in the right direction I’d appreciate it.


This is the place!

By the ‘old forum’, presumably you mean the Gitter chat rooms? They are still open, but nowhere near as active as they used to be.

Also, this forum is much easier to search than Gitter was, so you may find that a search on here solves your problem quicker than posting it :slight_smile:

I’m only on my phone at the moment so I can’t dig around in the source code. If no one has helped you solve it, I should be at my computer properly in the evening (Australian time - 12 hours or so).

I can’t see what’s causing the problem, but it appears as though your floating input is remembering the table cells previously selected and I can’t think of a way to clear that. I tried refreshing that page after each entry hoping the new values would be saved to the local storage you’re using, but they are not. One solution could be to save the new table state to the local storage, and then trigger a hard refresh of the page when it’s done.

That’s hacky and a horrible user experience though.

My first thought is that the whole floating input idea is way off base. You should look into HTML5’s contenteditable property.

Here’s some resources to get you started:

  1. Simple MDN entry
  2. MDN Guide - quite good, I think
  3. A codepen example

Edit: I took the liberty of renaming your thread - it might attract more useful responses from others if the title is more revealing of the nature of the problem.

I tried the contentEditable, not sure I like it as I was having trouble with sizing. I did manage to get the other version working, I was overlooking something. Jackson, thanks again for your help!

I’d love to hear what you discovered…it was really puzzling me :slight_smile:

Here it is as of now, it still has a data loading issue but it will eventually load:

And not only does it have trouble loading the data, it doesn’t always work
properly with respect to the issue I’m trying to solve… but sometimes it
does, so it’s probably some kind of async issue:

And here’s a codepen that sorta works:

(it wouldn’t let me add the full link here)