add table rows dynamically and scroll

Discussion in 'Javascript' started by leiño, Oct 30, 2006.

  1. leiño

    leiño Guest

    Hi,
    i am adding table rows dynamically with javascript. This works fine.
    The table is inside a div with scrolls, initially with 6 rows:


    .....
    <div style='overflow:auto; width:100%; height:100;'>
    <table>
    <tr><td>nothing</tr></td>
    <tr><td>nothing</tr></td>
    <tr><td>nothing</tr></td>
    <tr><td>nothing</tr></td>
    <tr><td>nothing</tr></td>
    <tr><td>nothing</tr></td>
    </table>
    </div>
    .....


    My problem is that when i add new rows using javascript, the scroll
    doesn´t adjust to new table rows, and i can`t navigate for all table,
    only for initial rows. Basically, the scroll doesn´t update when i add
    new rows
    Any idea?

    (I use IE)
     
    leiño, Oct 30, 2006
    #1
    1. Advertising

  2. leiño

    ASM Guest

    leiño a écrit :
    > Hi,
    > i am adding table rows dynamically with javascript. This works fine.
    > The table is inside a div with scrolls, initially with 6 rows:
    >
    >
    > ....
    > <div style='overflow:auto; width:100%; height:100;'>
    > <table>
    > <tr><td>nothing</tr></td>
    > <tr><td>nothing</tr></td>
    > <tr><td>nothing</tr></td>
    > <tr><td>nothing</tr></td>
    > <tr><td>nothing</tr></td>
    > <tr><td>nothing</tr></td>
    > </table>
    > </div>
    > ....
    >
    >
    > My problem is that when i add new rows using javascript, the scroll
    > doesn´t adjust to new table rows, and i can`t navigate for all table,
    > only for initial rows. Basically, the scroll doesn´t update when i add
    > new rows
    > Any idea?


    easiest (no tested) : an anchor on tfoot

    <tfoot id="goal"><tr><th>the end </th></tr></tfoot>
    </table>

    function addRow() {
    blah to add row
    location='#goal';
    }
     
    ASM, Oct 30, 2006
    #2
    1. Advertising

  3. leiño

    RobG Guest

    leiño wrote:

    > Hi,
    > i am adding table rows dynamically with javascript. This works fine.


    Without seeing the code, we only have your word for that.

    > The table is inside a div with scrolls, initially with 6 rows:
    > ....
    > <div style='overflow:auto; width:100%; height:100;'>
    > <table>
    > <tr><td>nothing</tr></td>
    > <tr><td>nothing</tr></td>
    > <tr><td>nothing</tr></td>
    > <tr><td>nothing</tr></td>
    > <tr><td>nothing</tr></td>
    > <tr><td>nothing</tr></td>
    > </table>
    > </div>
    > ....
    >
    > My problem is that when i add new rows using javascript, the scroll
    > doesn´t adjust to new table rows, and i can`t navigate for all table,
    > only for initial rows. Basically, the scroll doesn´t update when i add
    > new rows
    > Any idea?


    Test it outside the div, if you still can't see the new rows then it is
    because you are adding the new rows using appendChild to the table, not
    a tableSection element (such as the tbody), which is an IE
    requirement[1].

    You have two options:

    1. use appendChild to add rows to a table Section
    element (say a tbody)
    2. use table.insertRow()

    The following works for me in IE 6, it uses the first method though the
    second is probably better in many circumstances:

    <div style='overflow:auto; width:100%; height:100;'>
    <table>
    <tr><td>nothing</tr></td>
    <tr><td>nothing</tr></td>
    <tr><td>nothing</tr></td>
    <tr><td>nothing</tr></td>
    <tr><td>nothing</tr></td>
    <tr id="lastRow"><td>nothing</tr></td>
    </table>
    </div>

    <button onclick="
    var lastRow = document.getElementById('lastRow');
    for (var i=0; i<10; i++){
    lastRow.parentNode.appendChild(lastRow.cloneNode(true));
    }
    ">Add rows</button>


    1. Tables will have at least one tbody element whether you include the
    tags in your source HTML or not - the tags are optional, the element
    isn't.

    --
    Rob
     
    RobG, Oct 30, 2006
    #3
  4. leiño

    ASM Guest

    RobG a écrit :
    > <div style='overflow:auto; width:100%; height:100;'>
    > <table>
    > <tr><td>nothing</tr></td>
    > <tr><td>nothing</tr></td>
    > <tr><td>nothing</tr></td>
    > <tr><td>nothing</tr></td>
    > <tr><td>nothing</tr></td>
    > <tr id="lastRow"><td>nothing</tr></td>
    > </table>
    > </div>
    >
    > <button onclick="
    > var lastRow = document.getElementById('lastRow');
    > for (var i=0; i<10; i++){
    > lastRow.parentNode.appendChild(lastRow.cloneNode(true));


    AaRrrgggHhhh ! 10 elements with same id !

    > }
    > ">Add rows</button>
     
    ASM, Oct 31, 2006
    #4
  5. leiño

    RobG Guest

    ASM wrote:

    > RobG a écrit :
    > > <div style='overflow:auto; width:100%; height:100;'>
    > > <table>
    > > <tr><td>nothing</tr></td>
    > > <tr><td>nothing</tr></td>
    > > <tr><td>nothing</tr></td>
    > > <tr><td>nothing</tr></td>
    > > <tr><td>nothing</tr></td>
    > > <tr id="lastRow"><td>nothing</tr></td>
    > > </table>
    > > </div>
    > >
    > > <button onclick="
    > > var lastRow = document.getElementById('lastRow');
    > > for (var i=0; i<10; i++){
    > > lastRow.parentNode.appendChild(lastRow.cloneNode(true));

    >
    > AaRrrgggHhhh ! 10 elements with same id !


    11 actually, and 10 more each time the button is clicked. I'll claim
    the streakers' defence - it seemed like a good idea at the time!.

    I should have picked a different row to clone (or fixed the dup ids)
    but I didn't. :-(


    --
    Rob
     
    RobG, Oct 31, 2006
    #5
  6. leiño

    leiño Guest

    Code is something like this.



    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <title>Documento sin t&iacute;tulo</title>
    </head>
    <link rel="StyleSheet" href="styles.css" type="text/css" media="all" />
    <script language="javascript" type="text/javascript">
    var i=0;
    function addEstado(){

    var elements=document.getElementsByName("estadoExpedienteVacio");
    var fila, clase;
    var file_to_change=elements.item(elements.length -4-1);
    file_to_change.id="identificador1"+i;

    fila=elements.item(elements.length -1); //use last like template
    var tabla = document.getElementById('bodyEstado');
    tabla.appendChild(fila.cloneNode(true));



    var columns=file_to_change.cells;
    var td3=columns.item(2);
    var td4=columns.item(3);
    td3.innerHTML='date'+i;
    td4.innerHTML='coments'+i;
    i++;

    }

    </script>

    <body>

    <table class="estadoExpediente" border=1 cellpadding=0 cellspacing=0
    width=100% id="estadoExpediente">
    <thead>
    <tr>
    <td align="center" width="8%">&nbsp;</td>
    <td align="center" width="8%">&nbsp;</td>
    <td align="center" width="20%">Date</td>
    <td align="center" width="64%">Coment</td>
    </tr>
    </thead>

    <tbody>


    <tr><td colspan="4" width="100%">
    <div style="overflow:auto; width:99%;height:90px;">
    <table id="bodyEstado" width="100%">
    <tr id="estadoExpedienteVacio">
    <td align=center width="7%"><img
    src='./Imagenes/borrar.jpg' alt='borrar' ></td>
    <td align=center width="8%"><img
    src='./Imagenes/lupita.jpg' alt='ver' ></td>
    <td align=center width="22%">&nbsp;</td>
    <td align=center width="63%">&nbsp;</td>
    </tr>
    <tr id="estadoExpedienteVacio">
    <td align=center><img src='./Imagenes/borrar.jpg'
    alt='borrar' ></td>
    <td align=center><img src='./Imagenes/lupita.jpg'
    alt='ver'></td>
    <td align=center>&nbsp;</td>
    <td align=center>&nbsp;</td>
    </tr>
    <tr id="estadoExpedienteVacio">
    <td align=center><img src='./Imagenes/borrar.jpg'
    alt='borrar' ></td>
    <td align=center><img src='./Imagenes/lupita.jpg'
    alt='ver'></td>
    <td align=center>&nbsp;</td>
    <td align=center>&nbsp;</td>
    </tr>
    <tr id="estadoExpedienteVacio">
    <td align=center><img src='./Imagenes/borrar.jpg'
    alt='borrar' ></td>
    <td align=center><img src='./Imagenes/lupita.jpg'
    alt='ver'></td>
    <td align=center>&nbsp;</td>
    <td align=center>&nbsp;</td>
    </tr>
    <tr id="estadoExpedienteVacio">
    <td align=center><img src='./Imagenes/borrar.jpg'
    alt='borrar' ></td>
    <td align=center><img src='./Imagenes/lupita.jpg'
    alt='ver'></td>
    <td align=center>&nbsp;</td>
    <td align=center>&nbsp;</td>
    </tr>
    </table>
    </div>
    </td></tr>

    </tbody>

    </table>

    <img src='./Imagenes/anadir.jpg'><a class=linkcabecera
    href="javascript:addEstado();">Add</a>

    </body>
    </html>
     
    leiño, Oct 31, 2006
    #6
  7. leiño

    leiño Guest

    solved
    I needed to put tbody and appendchild to tbody instead of table

    Thanks to all
     
    leiño, Oct 31, 2006
    #7
  8. leiño

    RobG Guest

    leiño wrote:
    > Code is something like this.


    Use 2 or 4 spaces for indents and manually wrap code at about 70
    characters, it will help to prevent autowrapping which almost always
    introduces errors. The harder you make it for people to help, the less
    likely you are to get any.


    > <head>
    > <meta http-equiv="Content-Type" content="text/html;
    > charset=iso-8859-1">
    > <title>Documento sin t&iacute;tulo</title>
    > </head>
    > <link rel="StyleSheet" href="styles.css" type="text/css" media="all" />


    Link elements can only appear in the head element. HTML should use
    HTML markup, not XHTML.

    > <script language="javascript" type="text/javascript">


    The language attribute is deprecated, remove it. Keep type.

    > var i=0;


    Why is i global?


    > function addEstado(){
    >
    > var elements=document.getElementsByName("estadoExpedienteVacio");


    There are no elements named "estadoExpedienteVacio", you have used it
    in multiple id attributes (which creates invalid HTML). You might
    think of changing the id attributes to name attributes, which works in
    some browsers but is invalid HTML - tr elements can't have a name
    attribute.

    Use a browser with error reporting turned on (and preferably decent
    debugging support - Firefox with Firebug is pretty good), it will let
    you know about such basic mistakes.

    [...]
    >
    > <table class="estadoExpediente" border=1 cellpadding=0 cellspacing=0
    > width=100% id="estadoExpediente">


    Attribute values that include a % must be quoted:

    <URL: http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.2 >

    [...]
    > <img src='./Imagenes/anadir.jpg'><a class=linkcabecera
    > href="javascript:addEstado();">Add</a>


    Why use a link when what you really want is a button?


    --
    Rob
     
    RobG, Oct 31, 2006
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Subba Rao via DotNetMonster.com

    script for moving rows up and down and traverse thru rows of HTML table

    Subba Rao via DotNetMonster.com, Mar 19, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    8,238
    Subba Rao via DotNetMonster.com
    Mar 19, 2005
  2. Arjen Hoekstra
    Replies:
    0
    Views:
    563
    Arjen Hoekstra
    Aug 2, 2005
  3. Rio
    Replies:
    4
    Views:
    1,199
  4. T.G.
    Replies:
    2
    Views:
    1,074
  5. Martin
    Replies:
    19
    Views:
    933
    Neil Gould
    Sep 18, 2012
Loading...

Share This Page