Thanks. Very useful. I wonder about the random_id function: it is theoretically possible (but I admit with an infinitesimally small chance) that the generator provides the same id. Right? Would possibly need to store all generated id in a temporary array and check that each new one is not member of the array.
Hi Gilbert, depending on the scope of your project and how you are going to use the random id. But during my testing, I pushed it ids up to 100,000 and how duplications were found and it took up to 250 milliseconds. If you are interested in testing random id code to see if it work for you, I have a created a demo page for you : demo.codewithmark.com/2018-12-21-auto-id-check Hope this helps you.... Happy Coding :-)
hi, that was very useful, in my case I'm working on a list of choices for example the client choose t-shirt then he choose the type of material in a select list then he enter the number then after he finish i show a table filed with his choices when he can change the material or the quantity, i wonder how can I make one of the cells a select list, anyone can help , thank you so much
Hi Nikhil, You can definitely do that. The only thing is that on the client side it might take a little while to load up the table depending on the visitors computer. Other than that, it definitely is possible. Happy Coding :-)
Hi Mark, great tutorial..Thanks. Slightly digressing from the topic. I have the value of ajax_data on my html file in a dictionary format (coming from MongoDB and my python program). On my html file I can access it via {{ajax_data}}. How do I pass this value into my document ready function? If there are any videos or tutorials pls share..would be of great help
Sir what about if I'm going to get the data from my database and display it to the table, how? Thankyou sir, Im currently doing my Capstone project right now, and I would appreciate if you could help me thankyou .
Hey mark i am using Materialize + mysql / php and i have an form wich i need to data be sended to a table like this and the table being editable can you help me ?
Hi Mark I am totally new in Jquery and ajax. what I know how to do is to call my data using pdo and insert it into an html form. I have a PDO connection to a mssql database, I was wondering... what is the best practice to fetch the data since you are doing the form with jquery? is it from PHP and then calling the inside the foreach? or inside the tag using some code to call it using jquery? do you have any examples? What you do in the video is exactly what I needed, but now I have to insert my data there ... Thanks in advance.
Hi NinciaRed, Help me better understand how do you mean? If you are populating your table data on page load via Ajax’s call or simple php echo, then your users make the edits and you update your database via an ajax call. So, next time your page loads it will show the table data with the edits. For example, in the video I showed a table which had 4 column, if I edit “Last Name” cell of the first row from “With Mark” to “My Site” and your code updates the last name info via ajax call on your server. The next time I reload your page it will show “My Site” for last name cell of the first row. I hope this helps you Thanks Mark Happy Coding :-)
Let me explain, I need something like this but the data save in the source file until you edit it again. I need this without the use of MySQL. I tried playing around but I couldn' figure it out really. Thanks!
With the current technology that I know of, doesn’t allow your users to edit the source code file due to the web server and client computer security reasons. However, you can try to use client side storage (cookies or localstorage) option to save data and on page reload get the data from there. Here is a video training series on how to use localstorage (codewithmark.com/how-to-use-localstorage-like-a-boss) in case if you need help with that. Thanks Mark Happy Coding :-)
does this data saty there if i close the window plz someone help me i want ot create editable table like this that when i change something and leave i see the change when load again the page can someone explain cause with js and html css i havent done it i cant find how i try use local sotrage but still i dont know ??
Hi Lawrencr Thanks for asking the question... Help me better understand... You want to create html table with your data from mysql table. Is that correct? If so, are you familiar with jquery ajax function? As that will help you greatly. Here is a quick intro if you don't know it: www.w3schools.com/jquery/ajax_get.asp Basically you make an ajax call > your php > mysql table > get all the data you need and send it back to php > and php will send it back to jquery ajax. Once you have your mysql table data back in jquery, you can create a html table. Here is a quick video that might help you out: ua-cam.com/video/kcCYiA5mWDo/v-deo.html I hope this helps you... Happy Coding... :-) Mark
I have a table from mysql and print it in a php table form. Kinda like yours but its more on grading the students based on the criteria of the teacher.
Can you tell you what are the fields in your mysql table? That way I can create a step by step guide for you to follow to make it easier for you include in your project.....
Uhm, example activity 1, 2, 3,4. Seatwork 1,2,3,4. Long quiz 1,2,3,4. Exam 1,2,3,4. Like that but i need the result of that to print in the final field -> on the php table.
Hi Mark i have followed your code and i could able to edit the fields but whenever i refresh the page the data is getting erased. can you please add something about how to save the edited data back to database?
Hi Keith, Based on my own experience, every tool has its own advantages and disadvantages depending on the project you are working on. Happy Coding... :-)
![JavaScript - How To Add Edit Remove Selected Table Row From Input Text In Javascript [ with code ]](http://i.ytimg.com/vi/KnKMGCSPj3Y/mqdefault.jpg)
I spent quite awhile looking for a free editable table. This is exactly what I was looking for. Thank you!
Love your enthusiasm mannnn😂...
wow, you are master, this is really helpful, im vietnamese and i understand every single word you said! Thank you !
It was very very useful Thank you very very very much !!!!
it works, Thanks a lot for sharing your knowledges
You're welcome!
does the changes also happen in database ?
Hey mark,do u have the same concept done with plain javascript
Unfortunately not because of the compatibility issues with different browsers...
Thanks. Very useful. I wonder about the random_id function: it is theoretically possible (but I admit with an infinitesimally small chance) that the generator provides the same id. Right? Would possibly need to store all generated id in a temporary array and check that each new one is not member of the array.
Hi Gilbert, depending on the scope of your project and how you are going to use the random id. But during my testing, I pushed it ids up to 100,000 and how duplications were found and it took up to 250 milliseconds. If you are interested in testing random id code to see if it work for you, I have a created a demo page for you : demo.codewithmark.com/2018-12-21-auto-id-check
Hope this helps you....
Happy Coding :-)
thanks i copyed your script but when i edit and save does not save on my hosting !
You might be my new favorite! Thank you!
can we save updated data on database
Wonder how to do this with reactjs
how could I implement it with using select2 jquery plugin ?
thanks, Awesome tutorial.
hi, that was very useful, in my case I'm working on a list of choices for example the client choose t-shirt then he choose the type of material in a select list then he enter the number then after he finish i show a table filed with his choices when he can change the material or the quantity, i wonder how can I make one of the cells a select list, anyone can help , thank you so much
hi Mark, does this approach of dynamically creating the table content work if we have to generate a huge table? say around 10K records
Hi Nikhil,
You can definitely do that.
The only thing is that on the client side it might take a little while to load up the table depending on the visitors computer. Other than that, it definitely is possible.
Happy Coding :-)
Great Tutorial ! Thanks a lot for sharing your knowledges.
Thanks it helped me lot in my comments
it's great, thanks admin
I love this tutorial! Excelent dude!!
This is a great tutorial. Thank you so much!!!
Good work Mark! Thank you :)
Thank you! :-)
Can we save only one column value after editing.
You sure can... I will be creating a new video soon...
Happy Coding 😀
😀 Subscribe: codewithmark.com/yt-subscribe
Gift For You: codewithmark.com/gift
what syntax did you use?
This was created in jQuery
your are asowm bro
Hi Mark, great tutorial..Thanks. Slightly digressing from the topic. I have the value of ajax_data on my html file in a dictionary format (coming from MongoDB and my python program). On my html file I can access it via {{ajax_data}}. How do I pass this value into my document ready function? If there are any videos or tutorials pls share..would be of great help
Hii mark, nice work sifu (master), I am looking into you material as my reference
shifu
thx
Sir what about if I'm going to get the data from my database and display it to the table, how? Thankyou sir, Im currently doing my Capstone project right now, and I would appreciate if you could help me thankyou .
If you have a Database (like MySQL) you need a backend API, from which you can request the data.
Thank you nice tutorial
Glad you found it helpful
lo amo senior desconocido
Hey mark i am using Materialize + mysql / php and i have an form wich i need to data be sended to a table like this and the table being editable can you help me ?
Hi Bodhi,
What have you tried so far?
Excellent !
hey, how to add datepicker in table?
jsfiddle.net/qhtd3kw4/
Hi Mark
I am totally new in Jquery and ajax. what I know how to do is to call my data using pdo and insert it into an html form.
I have a PDO connection to a mssql database, I was wondering... what is the best practice to fetch the data since you are doing the form with jquery? is it from PHP and then calling the inside the foreach? or inside the tag using some code to call it using jquery? do you have any examples? What you do in the video is exactly what I needed, but now I have to insert my data there ... Thanks in advance.
Doesn't this save after refreshing? If it edits the source code it should?
Hi NinciaRed,
Help me better understand how do you mean?
If you are populating your table data on page load via Ajax’s call or simple php echo, then your users make the edits and you update your database via an ajax call. So, next time your page loads it will show the table data with the edits.
For example, in the video I showed a table which had 4 column, if I edit “Last Name” cell of the first row from “With Mark” to “My Site” and your code updates the last name info via ajax call on your server.
The next time I reload your page it will show “My Site” for last name cell of the first row.
I hope this helps you
Thanks
Mark
Happy Coding :-)
Let me explain, I need something like this but the data save in the source file until you edit it again. I need this without the use of MySQL. I tried playing around but I couldn' figure it out really. Thanks!
With the current technology that I know of, doesn’t allow your users to edit the source code file due to the web server and client computer security reasons.
However, you can try to use client side storage (cookies or localstorage) option to save data and on page reload get the data from there.
Here is a video training series on how to use localstorage (codewithmark.com/how-to-use-localstorage-like-a-boss) in case if you need help with that.
Thanks
Mark
Happy Coding :-)
does this data saty there if i close the window plz someone help me i want ot create editable table like this that when i change something and leave i see the change when load again the page can someone explain cause with js and html css i havent done it i cant find how i try use local sotrage but still i dont know
??
iam talking to webpage that dosent got a host
how can i add and delete a row?
This (codewithmark.com/easily-add-edit-and-delete-html-table-rows-or-cells-with-jquery) should help you out...
@@Codewithmark thank you so much mark
Hii. Can you help me with my thesis? I use php and mysql db and i nees to create like that table but its a grading table.
Hi Lawrencr Thanks for asking the question... Help me better understand... You want to create html table with your data from mysql table. Is that correct?
If so, are you familiar with jquery ajax function? As that will help you greatly. Here is a quick intro if you don't know it: www.w3schools.com/jquery/ajax_get.asp
Basically you make an ajax call > your php > mysql table > get all the data you need and send it back to php > and php will send it back to jquery ajax.
Once you have your mysql table data back in jquery, you can create a html table. Here is a quick video that might help you out: ua-cam.com/video/kcCYiA5mWDo/v-deo.html
I hope this helps you...
Happy Coding... :-)
Mark
I'm not familiar yet with jquery. I only use bootstraps.
I have a table from mysql and print it in a php table form. Kinda like yours but its more on grading the students based on the criteria of the teacher.
Can you tell you what are the fields in your mysql table? That way I can create a step by step guide for you to follow to make it easier for you include in your project.....
Uhm, example activity 1, 2, 3,4. Seatwork 1,2,3,4. Long quiz 1,2,3,4. Exam 1,2,3,4. Like that but i need the result of that to print in the final field -> on the php table.
Hi Mark
i have followed your code and i could able to edit the fields but whenever i refresh the page the data is getting erased.
can you please add something about how to save the edited data back to database?
^ I would like to learn how to save back to a database as well.
Great code; but with a lot of unnecessary sound effects.
How can you make fname not editable
Set contenteditable="false"
yatendra singh ranawat tried that It didn’t work
Please
Hindi me vedio banae
Jquery is dead bro! The same thing can be done better with Vue or Angular 😆.
Hi Keith,
Based on my own experience, every tool has its own advantages and disadvantages depending on the project you are working on.
Happy Coding... :-)