Table cell editing using plain Javascript | DOM coding challenges

In the following video we will write ES6 class which will convert normal HTML table into cell editable table.

For the project, we will use the Webpack starter kit project.

Follow me on social media:

[cegrif]

This is really well done! I love that he doesn't spend 26 minutes and 47 seconds fixing the endless chain of npm deprecations, dependency hell, and version mismatches. This really sold me on rolling out js components as vanilla as possible. Node and npm are great and often required, but having 30+ dependencies makes things rather unpredictable(good luck, especially if you take a year off the project and come back to it). Great work!

[kite]

The best JavaScript Table editing video ever created! This is exactly what I was looking for on a project, subscribed!

[johnpatterson]

This is incredible! Just exactly what I needed, and actually a pretty good introduction to classes for me too.

[ErikZoltan]

Awesome way to make a table editable. Good coding practices used.

[TeaTimeSumeet]

This is really awesome video for ES6 beginners Loved it. Kindly share links if there are other ES6 tutorials.

[danicastudies]

Very helpful for my project, thank you very much！

[pandemicovid]

Best Turorial, can you complete ths tutorial with add new table row ? i am absolute beginer.

[bignamek]

Just to be certain, the editd are not saved in file, just updated on the page while the page is active, correct? How would this be incorporated to make the changes saved? Would it have to be moved to a database? Or could something like PHP or Node JS essential save the changes into the page itself?

[erickviquezbrenes]

Hello, can you help me!? I followed the tutorial and helped me alot! But when I erase all the text in one "td", the space goes blank and I cannot enter text! How can I fix this! Thank you in advance!

[danielamarailie]

Hi! I'm less than a noob so please someone tell me how is this visible in that browser window? (I'm assuming the window opened on the right side of the screen is chrome or something). Because I can only open the index.html and it is visible as plain text, with no borders or editing options. I don't know what to use to open these files in order for the html to get that format (generated through .js and .scss files presented in this video). Help, please?