Adding new row to the existing table – JavaScript
July 4th, 2006 by Michael Sync
Download Code ~ http://michaelsync.net/demo/HTMLPage1.zip
Note: Preview Code has been removed. Please download the code if you wanna know how to do that.
Ref:
http://www.w3schools.com/js/js_examples_3.asp
Filed under JavaScript
December 13th, 2006 at 8:59 pm
I’ve got a question regarding the AddRow function of yours, can you email me?
December 14th, 2006 at 4:33 am
>>I’ve got a question regarding the AddRow function of yours, can you email me?
It would be great if you can post your questions here only.. Thanks a lot.
December 19th, 2006 at 9:23 pm
This function works GREAT for adding rows to a table. My question is how do you refer to these rows after they have been added? For instance, I’ve got 10 cells per row and could have 20-30 rows added. I need to get these values into an .asp page to update a SQL database. Some of my code looks like this:
var tbody = document.getElementById(“material”).getElementsByTagName(“tbody”)[0];
var tbl = document.getElementById(“material”);
var intRowsCount = tbl.rows.length;
var noOfRows = intRowsCount +1
var row = document.createElement(“TR”);
var cell1 = document.createElement(“TD”);
cell1.innerHTML = “”;
var cell2 = document.createElement(“TD”);
cell2.innerHTML = “”;
So each time a row is added, the name of my element increases by 1, i.e. title1, authors1, title2, authors2
I’m having difficulty getting these values to either (1) show up on my next .asp page or (2) just submitting to the same page and have them show up.
Any help would be great! Thanks.
December 19th, 2006 at 9:24 pm
hmmm, my innerHTML didnt’ show up when I pasted. Let me try it again:
“”;
December 19th, 2006 at 9:24 pm
December 19th, 2006 at 9:25 pm
well, guess I can’t show you what it looks like, won’t paste correctly on this site.
December 20th, 2006 at 11:55 am
Sorry for late reply.. i was on vacation… :)
Plz chk it out here…
http://esnips.com/doc/ccde7340-9afb-433b-bd15-d9598174a33e/GetDataHTMLTable
u might get some ideas….
December 20th, 2006 at 3:11 pm
Yours works like a charm. Mine returns my header row and then just null values. I’ve got a combination of dropdown boxes and text boxes. I’ll keep playing around with it unless you have any other ideas?
December 21st, 2006 at 3:13 am
Let me clarify your requirement.
1. You wanna add new rows to HTML Table. (this is you already done.)
2. Then, you wanna get all datas (rows + cols) from this HTML table..
Is it your requirement??
I think, it’s better if you can mail me your code that you have done so far…. and step by step explanation of your requirement..
I wil take a look and I will reply you a sol as soon as possible…
December 21st, 2006 at 3:23 pm
I tried putting the code in here but it seems to delete it and I don’t have your email address. But yes, that is what I want to do. Create new rows on the fly because the customer does not have a set amount of rows. Then I need to be able to get the data from each row and save to a Sql database. I’m using Javascript and .asp.
December 22nd, 2006 at 4:23 am
>>I don’t have your email address
hav u checked “About Me page”? :)
Okay aniway, here goes.. mchlsync AT gmail.com
Please chk this one..
http://esnips.com/doc/ce724568-f7d5-428b-8e74-c875ffb8281e/GetDataHTMLTable-v2
In this example, there are two buttons for adding new rows to Table and getting data from this Table..
If you click “Add New Row” button, the new row will be appended to the existing table. (this code is as same as my original post. )
If you click “Get Data” then the data from table will be shown in alert..
If you wanna store those data in SQL database, you have to write the Server-side coding in ASP page. then, you can invoke this server-side function from Javascript by using XMLHttpRequest (Ajax).
Hope it would help..
December 23rd, 2006 at 7:27 am
htytyty
December 23rd, 2006 at 9:00 am
Hi Peg,
hav u solved ur js probs?
December 26th, 2006 at 2:59 pm
Just emailed you :)
January 5th, 2007 at 10:13 am
var i=0;
function DelRow(id)
{
var row = id.parentNode.parentNode.rowIndex;
var tbody = document.getElementById(‘table0′).tBodies[0].deleteRow(row);
alert(tbody);
}
function addrow()
{
var tbody = document.getElementById(‘table0′).getElementsByTagName(‘tbody’)[0];
row = document.createElement(‘TR’);
cell0 = document.createElement(‘TD’);
cell1 = document.createElement(‘TD’);
cell2 = document.createElement(‘TD’);
cell0.innerHTML=” “;
cell1.innerHTML =” “;
cell2.innerHTML =” “;
i=i+1;
row.appendChild(cell0);
row.appendChild(cell1);
row.appendChild(cell2);
tbody.appendChild(row);
}
January 10th, 2007 at 9:13 pm
i give up
January 22nd, 2007 at 5:49 am
hi,
i am a fresher , i have just started learning .net, and this site is very useful to me.thank u for u r work.
regards,
preethi.s
January 22nd, 2007 at 5:51 am
hi,
i have some questions to be posted where shall i do that?
do rply,
regards,
preethi.s
January 22nd, 2007 at 10:45 am
@s.preethi,
>>i have some questions to be posted where shall i do that?
You can post your question as a comment here.
Thanks for visiting my blog.
@Peg
I’m really sorry. peg.. I haven’t checked your mail. I’ll try to reply you soon. man. sorry again.man.
January 31st, 2007 at 11:55 am
This is an excelent pice of code which is running with a minimum change.
I m highly delighted and appreciated with it.
it saved a lot of time for me as a developer.
February 16th, 2007 at 9:37 am
Hi,
can i use the code for html using j2ee technologies……
i have tried this but it is giving error that Object does not support this property.
please let me know how to implement it !!!!!!!!!
thanks,
ramya.
February 16th, 2007 at 9:58 am
Actually, it’s nothing about server-side scripts such jsp, asp, asp.net, php and etc. it’s just client-script so that you can use in any technology you want.
maybe, the object that you try to get by using “getElementById” doesn’t create properly..
Please show me your code that you have done so far.. I’ll take a look at my free time..
Note: if you are not able to post your code here then you may probably upload it to somewhere and give me a link.
Thanks.
March 2nd, 2007 at 4:30 pm
Hello,
I was trying with this code like the following, but I failed to get the value back. I tried in the link provided by you , but it was going to something else. please reply me, how could I get the new row value. My mail id is ceema_csatyahoo.com. or else you can post it here itself, so that some else also can make use of it. Thanks Ceema
WebForm9
test
first row
second row
June 27th, 2007 at 10:30 am
wp comment system has filtered your code by default..
Could you please upload ur code to somewhere else and give me this link?
June 29th, 2007 at 7:39 am
Very helpful code dude. . . Thanks!
July 9th, 2007 at 1:50 am
Hi, how do you return the input text value with your code?
July 9th, 2007 at 2:22 am
Hi phwae,
>>how do you return the input text value with your code?
to my code?? I didn’t return anything in my code…
If you wanna return some values to the Server-side script, please read “Custom Javascript Dialog” article in my blog..
July 18th, 2007 at 10:47 am
Hi, Good work… Thanks
;)
July 27th, 2007 at 9:19 pm
Anyone have any idea on how to do this with columns instead of rows.
August 2nd, 2007 at 11:10 am
thanks a lot ,
Code Is very nice.
Really appreciative.
August 8th, 2007 at 7:27 am
hai, i’m actually dont have any problem adding a row in existing table. But my problem now is the row automatically shows though i didnt click on Add Row button. do u hve any idea?
August 8th, 2007 at 7:59 am
Hi Nur,
You can move the calling the function code from click event to onload event.
August 8th, 2007 at 8:02 am
hmm.. is there any way i can contact u? yahoo messenger maybe?
August 8th, 2007 at 9:02 am
Let’s say ~~ there is one funcation called “AddRow()”. this function allows users to add new row to the existing HTML table. If we wanna add new row then you call this function from button’s click event.
eg: onclick=”AddRow();”
If you wanna add the new row automatically, you can move this function to onload..
eg: body onload=”AddRow();”
Do you understand what I meant?? If you have more explantion about your problem, please write the comment here.. so, other people who has the same problem like you can read and solve their problem.. but if you wanna send some demo, you can mail me to “mchlsync AT gmail . com”.. I’m using messenger or other chatting tool. thanks.
August 14th, 2007 at 9:28 pm
It was a great code. But I have the following requirement to add members of a family into database using a form.
the table starts with
Family Name
Member1
[Add another Member]
upon clicking the button b1 my table should like this
Family Name
Member1
Member2
[Add another Member]
Everything that the table has in a form so that it can be sent to a jsp that adds these data into a database. And later this data needs to be displayed in display.jsp with exact number of members.
If you are not clear of my question please let me know.
Regards
Sandeep
August 15th, 2007 at 2:07 pm
Hi Sandeep,
Yeah. I’m not sure what you are asking…. what problem are you facing?
August 21st, 2007 at 2:24 pm
Hi,
could u please tell me
I also create a dynamic table using document. CREATEELEMNT
but now I want to post all the HTML TABLE VALUES into mysql
I’m using PHP .. could u pls help me how I’ll update dynamic table values into real database??
Many thanks in advance..
Please I really need that
Thanks u very much…….
M.
February 15th, 2008 at 2:20 am
do have any idea on deleting a particular row from table which is selected by use of checkbox using javascript.(note it must delete the row from database also)
Thanx & regaurds from,
lmpcvs
February 15th, 2008 at 2:21 am
If any body have any idea on deleting a particular row from table which is selected by use of checkbox using javascript.(note it must delete the row from database also)
Thanx & regaurds from,
lmpcvs
March 21st, 2008 at 1:09 pm
From javascript there is no way to go to the database (only if you use Ajax, but I think you don’t). I presume that in the table you have data from the DB and by selecting a checkbox you want to remove the specific row from DB.
If this is what you want, my suggestion is to add in the checkbox control the attribute value chick will contain the ID from the specific row from the DB.
And when you will press the Remove button (I presume this is what you have) just check what checkbox is checked and get this value (ID from database) and submit the form. You can put this ID into a hidden field for easier use.
It would be easier to say exactly in what language is the server side because there you have to do the delete from database.
Hope this helps. Good luck.
June 26th, 2008 at 1:40 am
i will like to know how to add rows automatically using only option boxes
October 8th, 2008 at 3:52 am
Im having one problem….I have page where i need to add new rows to existing table…I want to do that from another window.It looks like this:when i click on “add new row” on my main page(there is my table),new window open(javascript works that) with some field for input.When i click on submit button on that second window it should add new row on main window,without exiting from that second window.Problem is how to say your function for adding new rows that i want to use table from other document(main one) not from second one,because it works fine when i add new rows in same document,problem is when i need to do that from another window.I cant reach how to tell function “adding new rows” that im working on table from another window.Should I pass some arguments to functions or there is better solution in javascript?
By the way Im working in php,Im still not familiar with ASP ,I hope it wont be problem for solution…
thanks in advance
ps However this example helped me a lot,congratulations
February 5th, 2009 at 10:49 am
Hello friend,
I tried this code. It is very useful but I have some doubt in my mind.
“CAN WE INSERT SIMILAR ROW AS PREVIOUS ROW IN MY TABLE WITH SAME CONTENT e.g. TEXT FIELD OR LIST BOX etc.?”
Please help me on that.Mail me the code My table type is like this…….
ADD
Activity
Start Date
End Date
Status
Calendar.setup({
inputField : “cal-field-1″,
button : “button”,
align : “Tr”
});
Calendar.setup({
inputField : “cal-field-2″,
button : “button2″,
align : “Tr”
});
Pending
On Going
Completed
My email id : harshal1900@gmail.com
March 3rd, 2009 at 9:38 am
Thank you for posting this!