add table rows dynamically and scroll

L

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)
 
A

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

RobG

leiño said:
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.
 
A

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(true));

AaRrrgggHhhh ! 10 elements with same id !
 
R

RobG

ASM said:
RobG a écrit :

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. :-(
 
L

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("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>
 
L

leiño

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

Thanks to all
 
R

RobG

leiño said:
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.

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?
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top