add table rows dynamically and scroll

[leiño]

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)

[ASM]

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';
}

[RobG]

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(t rue));
}
">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

[ASM]

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(t rue));

AaRrrgggHhhh ! 10 elements with same id !

}
">Add rows</button>

[RobG]

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(t rue));

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

[leiño]

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("estadoExpedie nteVacio");
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]

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

Thanks to all

[RobG]

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("estadoExpedie nteVacio");

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