Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: Dynamic Table

  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamic Table

    Hello everybody!
    I'm in a bit of trouble with a dynamic table which i created this way:

    Code:
    var t=document.createElement("table");
    t.setAttribute("id","tab");
    var x, y, z, w;
    var r=new Array();
    var c=new Array();
    r[0]=document.createElement('tr');
    c[0]=document.createElement('td');
    c[0].setAttribute("class","tabel");
    x=document.createTextNode("Coloana");
    c[0].appendChild(x);
    c[1]=document.createElement('td');
    c[1].setAttribute("class","tabel");
    y=document.createTextNode("Text");
    c[1].appendChild(y);
    c[2]=document.createElement('td');
    c[2].setAttribute("class","tabel");
    z=document.createTextNode("Numar");
    c[2].appendChild(z);
    c[3]=document.createElement('td');
    c[3].setAttribute("class","tabel");
    w=document.createTextNode("Optiune");
    c[3].appendChild(w);
    r[0].appendChild(c[0]);
    r[0].appendChild(c[1]);
    r[0].appendChild(c[2]);
    r[0].appendChild(c[3]);
    t.appendChild(r[0]);
    var j=0;
    for (var i=1; i<n; i++)
        {r[i]=document.createElement('tr');
    	 r[i].setAttribute("class","tabel");	 
         c[1]=document.createElement('td');
    	 c[1].setAttribute("class","tabel");
         x=document.createTextNode(++j);
         c[1].appendChild(x);
         c[2]=document.createElement('td');
    	 c[2].setAttribute("class","tabel");
         y=document.createTextNode(srand());
         c[2].appendChild(y);
    	 c[3]=document.createElement('td');
    	 c[3].setAttribute("class","tabel");
    	 z=document.createTextNode(Math.floor((Math.random()*100)+0));
    	 c[3].appendChild(z);
    	 c[4]=document.createElement('td');
    	 c[4].setAttribute("class","tabel");
    	 w=document.createTextNode(addDelete());
    	 c[4].appendChild(w);
    	 r[i].appendChild(c[1]);
    	 r[i].appendChild(c[2]);
    	 r[i].appendChild(c[3]);
    	 r[i].appendChild(c[4]);
         t.appendChild(r[i]);}
    document.body.appendChild(t);
    I want to add buttons in the cells of the last column, but the function doesn't work. This is it:

    Code:
    function addDelete()
    {
    var b=document.createElement("input");
    b.setAttribute("type", "button");
    b.setAttribute("value", "Delete");
    b.setAttribute("id", "butoaneD");
    var t=document.getElementById("table");
    var aidi=t.getElementsByTagName("td"); 
    aidi.appendChild(b);
    }
    What am i doing wrong?

  • #2
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,960
    Thanks
    120
    Thanked 76 Times in 76 Posts
    Code:
    var aidi=t.getElementsByTagName("td"); 
    aidi.appendChild(b);
    The first line returns array !
    So you are appending to array not to TD, even less to ALL TD-s.

    Code:
    aidi[0].appendChild(b);
    That would probably do something, to fill all TD-s,you have to get everything into loop.
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,628
    Thanks
    0
    Thanked 648 Times in 638 Posts
    Why are you using createElement to create the rows and cells rather than using inserRow() and insertCell() to add the rows and cells to your table?

    The way you are doing not only involves lots more typing but the code also runs a lot slower in most browsers. Using the table methods for table manipulation results in much sorter earier to maintain code.

    See http://javascriptexample.net/domtable12.php for an example of the simplest way to create a table using JavaScript
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New Coder
    Join Date
    Nov 2012
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know you're right, flegall, but i don't really want to start all over again now. I don't want a very performant code; if it works, that's a good start for me.

    Meanwhile, i modified the addDelete() function and it looks like this:

    Code:
    function addDelete()
    {
    var b=document.createElement("input");
    b.setAttribute("type", "button");
    b.setAttribute("value", "Delete");
    b.setAttribute("id", "butoaneD");
    b.setAttribute("onclick", "removeRow()");
    var el=document.getElementsByClassName("tabelcol");
    for (var j=0; j<el.length; j++)
         el[j].appendChild(b);
    This works, but it places the button on each cell of the column at a turn and it stops at the last one. I wanted it to be placed on every cell of the column.

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You are appending the same node so it will only stick to the last cell. One way to do this is to clone the node (b), but ids must be unique:
    Code:
    function addDelete()
    {
        var b=document.createElement("input");
        b.setAttribute("type", "button");
        b.setAttribute("value", "Delete");
        // b.setAttribute("id", "butoaneD");
        b.setAttribute("onclick", "removeRow()");
        var newb = b.cloneNode(true);
        var el=document.getElementsByClassName("tabelcol");
        for (var j=0; j<el.length; j++) {
            newb.id = "butoaneD" + j;
            el[j].appendChild(newb);
            newb = b.cloneNode(true);
        }
    I haven't tested this..
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    New Coder
    Join Date
    Nov 2012
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much, AndrewGSW. It works now.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •