44 thoughts on “Adding new row to the existing table – JavaScript

  1. 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.

  2. 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?

  3. 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…

  4. 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.

  5. >>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..

  6. 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);

    }

  7. 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

  8. @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.

  9. 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.

  10. 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.

  11. 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 !!!!!!!!!

    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.

    i have tried this but it is giving error that Object does not support this property.

    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.

  12. 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

  13. 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..

  14. 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?

  15. 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.

  16. 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

  17. 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.

  18. 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

  19. 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

  20. 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.

  21. 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

  22. 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

Leave a Reply

Your email address will not be published. Required fields are marked *