Dear Reader in This Tutorial let us Know that “How we can Add/Delete Multiple HTML Rows Using JavaScript”, So in this Tutorial, We Learn Step By Step Multiple Add Rows Process.
Multiple HTML Rows Required if we wish to add multiple rows at once, like if we are going to add employee then we have chosen to add every employee one by one but if we want to add multiple employees at once then we need to first multiple HTML rows where we fill values and save, So in this tutorial we learn to Add Multiple HTML Rows as we mention below snapshot
And you can also see Live Demo by click on bellow Demo button
Step 1:- At first Create index.php file and paste the below code and save in your project
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>welcome on PHP Tutorial</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="js/script.js"></script> </head> <body> <div class="container"> <br /> <form name="" action="" method="POST"> <input type="button" value="Add Row" onclick="addRow('dataTable')" class="btn btn-success"/> <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" class="btn btn-danger"/> <br /><br /> <table> <tr> <th>S.N </th> <th>Name</th> <th>Mobile</th> <th>Email</th> </tr> <tbody id="dataTable" width="350px" border="1"> <tr> <td><input type="checkbox" name="chk[]" id="chk_1"/></td> <td><input type="text" name="name[]" id="name_1" placeholder="Name" class="form-control" /></td> <td><input type="text" name="mobile[]" id="mobile_1" placeholder="Mobile" class="form-control"/></td> <td><input type="text" name="email[]" id="email_1" placeholder="Email" class="form-control"/></td> </tr> </tbody> <input type="hidden" name="count" id="count" value="1"> <tr><td colspan="5"> </td></tr> </table> </form> </div> <script> </script> </body> </html> |
Step 2:- Now Create a script.js file in your project and paste the below code in script file-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
function addRow(tableID) { var table = document.getElementById(tableID); var count = document.getElementById('count').value; //alert(count); var c = parseInt(count)+parseInt(1); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for(var i=0; i<colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[0].cells[i].innerHTML; switch(newcell.childNodes[0].type) { case "text":newcell.childNodes[0].value = ""; var node_id = newcell.childNodes[0].id; var node_id_arr = node_id.split('_'); newcell.childNodes[0].id=node_id_arr[0]+'_'+c; break; case "checkbox":newcell.childNodes[0].checked = false; var node_id = newcell.childNodes[0].id; var node_id_arr = node_id.split('_'); newcell.childNodes[0].id=node_id_arr[0]+'_'+c; break; } $('#count').val(c); } } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; var ids = row.cells[0].childNodes[0].id; if(null != chkbox && true == chkbox.checked) { var count = document.getElementById('count').value; var c = parseInt(count)-parseInt(1); if(rowCount <= 1) { alert("Cannot delete all the rows."); break; } table.deleteRow(i); rowCount--; i--; $('#count').val(c); } } } catch(e) { alert(e); } } |
Step 3:- Now run your project in your browser as
localhost/your_project_name/index.php
like
localhost/php_test/index.php
You can see the result as bellow.
Now you can add Multiple HTML Rows on click Add Row and for delete Row Check Checkbox and click on Delete Row button. If you have any query then comment below, Thanks
43 Comments:
desktop speakers bluetooth November 04, 2017
I’m not sure where you are getting your info, but great topic.
I needs to spend some time learning more or understanding
more. Thanks for wonderful information I was looking for this info for my mission.
Webpreparations Team November 04, 2017
Hey, thanks budy, May be we got the info about your need by some positive vibrations running in this world. Actually, we have started this blog for sharing our knowledge to the people like you, who will be our great lovable reader. And we are always ready to help everyone.
LymnTodo November 06, 2017
die Verständliche Antwort
Anonymous links
Webpreparations Team November 07, 2017
Vielen Dank
mios haimawan November 10, 2017
Hey! Do you know if they make any plugins to help with
SEO? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good success.
If you know of any please share. Thanks!
Webpreparations Team November 15, 2017
Dear Reader, If you are using WordPress for your Website, then of course many SEO plugins are there for making your site good Ranking. One of them is Yoast SEO — WordPress Plugins . You can go with this, and we are sure that you will be benefited with this. Cheers!
Laminate flooring November 12, 2017
Hello there, I discovered your website by means of Google whilst searching
for a similar topic, your web site got here up, it seems great.
I have bookmarked it in my google bookmarks.
Hi there, simply become alert to your blog via Google, and found that it’s really informative.
I am gonna watch out for brussels. I will appreciate should you proceed this in future.
Numerous people will probably be benefited from your writing.
Cheers!
Webpreparations Team November 13, 2017
Hi, Thanks for appreciating and your well wishes.We will try to give our best 🙂
www.happygoodfridayquotes.com/ November 28, 2017
I have read so many posts on the topic of the blogger lovers except this article is genuinely a good paragraph, keep it up.
happy Christmas wishes for friends November 30, 2017
It is appropriate time to make a few plans for the long run and it is time
to be happy. I have read this submit and if I may just I want to recommend you some attention-grabbing things or tips.
Perhaps you could write next articles relating to
this article. I desire to read more issues about it!
Kissanime app December 03, 2017
Heya i’m for the primary time here. I came across
this board and I to find It truly useful & it helped me out a lot.
I’m hoping to offer one thing back and aid others like you helped me.
Webpreparations Team December 05, 2017
Thanks And All The Best 🙂
2017 Christmas images December 06, 2017
I’m really enjoying the design and layout of your blog. It’s a very easy on the eyes which makes it
much more enjoyable for me to come here and visit
more often. Did you hire out a developer to create your theme?
Outstanding work!
Webpreparations Team December 07, 2017
Hello, Thank you for appreciating and your well wishes. We will try to give our best and as We are developers that’s why We have developed this theme by ourselves only. And if you have any type of requirements regarding any development then please contact us. We will be glad to work with you. Thanks again dear.
Johne761 December 16, 2017
I gotta favorite this internet site it seems handy very useful
Webpreparations Team December 22, 2017
Thank you dear Reader.
Johna425 December 16, 2017
Wow, superb blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is wonderful, let alone the content!
Smithb905 December 16, 2017
You are my inhalation, I have few web logs and rarely run out from post
Johnb625 December 19, 2017
I’ve read some excellent stuff here. Definitely price bookmarking for revisiting. I surprise how much effort you place to create this type of great informative site.
Webpreparations Team December 22, 2017
Thank you soo much. We are always ready to transfer greate knowledge and try to our best 🙂
navigate to this web-site January 03, 2018
I simply want to mention I’m beginner to blogging and site-building and actually loved you’re page. Likely I’m want to bookmark your blog post . You certainly come with perfect articles. Thanks a lot for sharing your blog site.
Webpreparations Team January 03, 2018
Thank you soo much dear Reader for appreciating us and we are always ready to share our knowledge with readers like you 🙂 🙂
shoes January 15, 2018
Excellent blog here! Also your website lots up very fast! What web host are you using? Can I get your affiliate link to your host? I desire my website loaded up as fast as yours lol
Webpreparations Team January 16, 2018
Thanks 🙂
laczenie rur pe January 15, 2018
you are in reality a good webmaster. The web site loading pace is amazing. It sort of feels that you’re doing any unique trick. Also, The contents are masterwork. you’ve performed a fantastic process on this subject!
Webpreparations Team January 16, 2018
Thanks 🙂
brandsfavor.com January 15, 2018
Somebody essentially help to make severely posts I would state. This is the first time I frequented your website page and up to now? I surprised with the analysis you made to create this actual publish extraordinary. Excellent job!
Webpreparations Team January 16, 2018
Thank 🙂
http://consultarnumero.com January 15, 2018
I have not checked in here for a while because I thought it was getting boring, but the last few posts are great quality so I guess I will add you back to my everyday bloglist. You deserve it my friend 🙂
Webpreparations Team January 16, 2018
Thanks buddy 🙂
Home Improvement January 16, 2018
F*ckin’ amazing issues here. I am very happy to peer your post. Thanks so much and i am taking a look ahead to contact you. Will you please drop me a e-mail?
Webpreparations Team January 16, 2018
Great, you can contact us from Here . We will be happy to serve you 🙂
odziez bhp gorzo January 16, 2018
I’ve learn several just right stuff here. Definitely value bookmarking for revisiting. I wonder how so much effort you place to create one of these great informative site.
crammonduk.com January 16, 2018
I like the valuable info you provide in your articles. I will bookmark your blog and check again here regularly. I’m quite sure I will learn many new stuff right here! Good luck for the next!
http://gshguide.com January 16, 2018
Keep functioning ,splendid job!
News January 16, 2018
Thanks, I have recently been looking for info about this subject for a while and yours is the greatest I have discovered so far. However, what in regards to the conclusion? Are you certain about the supply?
Webpreparations Team January 16, 2018
Thanks Dear Reader, we will always provide such a useful stuffs, please don’t worry 🙂
Townhomes January 17, 2018
Hi there, You have done an incredible job. I’ll certainly digg it and personally suggest to my friends. I’m confident they will be benefited from this site.
Webpreparations Team January 17, 2018
Thanks 🙂
FurnitureMarketplace January 17, 2018
I have been browsing online more than three hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. Personally, if all website owners and bloggers made good content as you did, the web will be much more useful than ever before.
Webpreparations Team January 17, 2018
Thanks 🙂
minecraft September 29, 2018
Nice post. I learn something totally new and challenging on websites I stumbleupon everyday.
It’s always useful to read through articles from other writers and use
something from other websites.
Webpreparations Team September 29, 2018
Thank you so much 🙂