add table rows dynamically and scroll

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

leiño - 30 Oct 2006 23:31 GMT

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)

Reply to this Message

ASM - 31 Oct 2006 00:19 GMT

leiño a écrit :

> Hi,
> i am adding table rows dynamically with javascript. This works fine.
[quoted text clipped - 18 lines]
> 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';
}

Reply to this Message

RobG - 31 Oct 2006 00:59 GMT

> 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:
> ....
[quoted text clipped - 15 lines]
> 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.

Signature

Rob

Reply to this Message

ASM - 31 Oct 2006 01:27 GMT

RobG a écrit :

> <div style='overflow:auto; width:100%; height:100;'>
> <table>
[quoted text clipped - 11 lines]
> for (var i=0; i<10; i++){
> lastRow.parentNode.appendChild(lastRow.cloneNode(true));

AaRrrgggHhhh ! 10 elements with same id !

> }
> ">Add rows</button>

Reply to this Message

RobG - 31 Oct 2006 07:45 GMT

> RobG a écrit :
> > <div style='overflow:auto; width:100%; height:100;'>
[quoted text clipped - 14 lines]
>
> 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. :-(

Signature

Rob

Reply to this Message

leiño - 31 Oct 2006 09:43 GMT

Code is something like this.

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Documento sin tí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%"> </td>
<td align="center" width="8%"> </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%"> </td>
            <td align=center width="63%"> </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> </td>
            <td align=center> </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> </td>
            <td align=center> </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> </td>
            <td align=center> </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> </td>
            <td align=center> </td>
                </tr>
                </table>
            </div>
            </td></tr>

        </tbody>

</table>

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

</body>
</html>

Reply to this Message

leiño - 31 Oct 2006 09:57 GMT

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

Thanks to all

Reply to this Message

RobG - 31 Oct 2006 10:22 GMT

> 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í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?

Signature

Rob

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / October 2006

add table rows dynamically and scroll