Adding new row to the existing table – JavaScript
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
I’ve got a question regarding the AddRow function of yours, can you email me?
>>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.
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.
hmmm, my innerHTML didnt’ show up when I pasted. Let me try it again:
“”;
well, guess I can’t show you what it looks like, won’t paste correctly on this site.
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….
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?
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…
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.
>>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..
htytyty
Hi Peg,
hav u solved ur js probs?
Just emailed you :)
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);
}
i give up
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
hi,
i have some questions to be posted where shall i do that?
do rply,
regards,
preethi.s
@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.
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.
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.
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.
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
wp comment system has filtered your code by default..
Could you please upload ur code to somewhere else and give me this link?
Very helpful code dude. . . Thanks!
Hi, how do you return the input text value with your code?
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..
Hi, Good work… Thanks
;)
Anyone have any idea on how to do this with columns instead of rows.
thanks a lot ,
Code Is very nice.
Really appreciative.
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?
Hi Nur,
You can move the calling the function code from click event to onload event.
hmm.. is there any way i can contact u? yahoo messenger maybe?
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.
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
Hi Sandeep,
Yeah. I’m not sure what you are asking…. what problem are you facing?
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.
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
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
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.
i will like to know how to add rows automatically using only option boxes
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
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
Thank you for posting this!