Foros del Web » Programando para Internet » Javascript »

Controlar atributo rowSpan de una tabla a través de javascript

 Estas en el tema de Controlar atributo rowSpan de una tabla a través de javascript en el foro de Javascript en Foros del Web. Buenas noches, a ver si alguien me podría ayudar con un problemilla que tengo. Necesito controlar la propiedad rowspan de una tabla creada en XSL ...
  #1 (permalink)  
Antiguo 20/12/2009, 14:28
 
Fecha de Ingreso: enero-2009
Mensajes: 12
Antigüedad: 16 años
Puntos: 0
Controlar atributo rowSpan de una tabla a través de javascript
Buenas noches,
a ver si alguien me podría ayudar con un problemilla que tengo.
Necesito controlar la propiedad rowspan de una tabla creada en XSL a traves de un código js.

Para que quede mas claro, pongo una ilustración. Lo que necesito hacer es lo siguiente:



Los botones "añadir otro" y eliminar son funciones js que agregan o eliminan registros. El objetivo es que a medida que se añadan o eliminen dichos registros tengo que ir modificando el valor de la propiedad rowspan de la primera columna. La tabla tiene dos columnas, y la primera tiene que tener rowspan con el valor de filas que tenga la segunda de las columnas.

Espero haberme explicado y que me podáis ayudar.
Muchas gracias de antemano.

Si alguien se le ocurre otra manera mejor de hacerlo, por mi encantado.
  #2 (permalink)  
Antiguo 20/12/2009, 14:55
 
Fecha de Ingreso: diciembre-2009
Mensajes: 438
Antigüedad: 15 años, 1 mes
Puntos: 16
Respuesta: Controlar atributo rowSpan de una tabla a través de javascript
Yo lo enfocaría distinto y te traería menos problemas. ¿En vez de hacer una fila para cada registro porque no los pones uno debajo del otro en la misma celda? Así la celda de la izquierda se expandería/contraería con el tamaño de la celda de la derecha.
  #3 (permalink)  
Antiguo 21/12/2009, 05:33
 
Fecha de Ingreso: enero-2009
Mensajes: 12
Antigüedad: 16 años
Puntos: 0
Respuesta: Controlar atributo rowSpan de una tabla a través de javascript
Cita:
Iniciado por Osdiwe Ver Mensaje
Yo lo enfocaría distinto y te traería menos problemas. ¿En vez de hacer una fila para cada registro porque no los pones uno debajo del otro en la misma celda? Así la celda de la izquierda se expandería/contraería con el tamaño de la celda de la derecha.
Ya, no es mala idea. Pero eso me obligaría a modificar mis funciones javascript que ya las tengo hechas para que añadan o eliminen nuevas celdas.

¿Alguna idea mas por favor?
  #4 (permalink)  
Antiguo 21/12/2009, 06:57
Avatar de CHuLoSoY  
Fecha de Ingreso: febrero-2002
Ubicación: Ribeira (Galicia)
Mensajes: 1.900
Antigüedad: 23 años
Puntos: 29
Respuesta: Controlar atributo rowSpan de una tabla a través de javascript
La idea que te doy yo es similar a la de arriba. En vez de tener esto:

Cita:
<table width=100%>
<tr><td width=30% rowspan=3>&nbsp;</td>
<td width=70%>&nbsp;</td></tr>
<tr><td width=70%>&nbsp;</td></tr>
<tr><td width=70%>&nbsp;</td></tr>
</table>
porqué no así?:

Cita:
<table width=100%>
<tr><td width=30%>&nbsp;</td>
<td width=70%>
<table width=100%>
<tr><td width=100%>&nbsp;</td></tr>
<tr><td width=100%>&nbsp;</td></tr>
<tr><td width=100%>&nbsp;</td></tr>
</table>
</td></tr>
</table>
No tendrías que cambiar nada en tu javascript porque se lo estás aplicando a una tabla, con la diferencia que no tienes que usar rowspan.

Es lo mismo que te dijeron arriba.

Saludos.
__________________
ESQUIO Dominios y Hosting
Las mejores características con los mejores precios.
  #5 (permalink)  
Antiguo 21/12/2009, 08:08
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 10 meses
Puntos: 574
Respuesta: Controlar atributo rowSpan de una tabla a través de javascript
Javascript distingue mayúsculas de minúsculas...

rowSpan no rowspan


Código HTML: 
Ver original
  1. <html>
  2. <body>
  3. <script language="JavaScript">
  4. function function1() {
  5.     document.getElementById("myTableHeader").rowSpan += 1;
  6. }
  7. function function2() {
  8.     location.reload();
  9. }
  10. </script>
  11. <table width="542" border="10" bordercolor="red" cellpadding="20">
  12.     <tr>
  13.         <th id="myTableHeader">Cell 1</th>
  14.         <th>Cell 2</th>
  15.         <th id="th5">Cell 3</th>
  16.     </tr>
  17.     <tr>
  18.         <th>Cell 4</th>
  19.         <th id="th2">Cell 5</th>
  20.         <th>Cell 6</th>
  21.     </tr>
  22.     <tr>
  23.         <th>Cell 7</th>
  24.         <th>Cell 8</th>
  25.         <th>Cell 9</th>
  26.     </tr>
  27.     <tr>
  28.         <th >Cell 10</th>
  29.         <th >Cell 11</th>
  30.         <th >Cell 12</th>
  31.     </tr>
  32. </table>
  33. <input type="button" value="Span(2) Cell 1" onClick="function1();">
  34. <input type="button" value="Restore" onClick="function2();">
  35. </body>
  36. </html>

Esto hace lo que pides pero, no del todo!!! (he modificado un poco el ejemplo que dan aqui)

Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Documento sin t&iacute;tulo</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <script language="JavaScript" type="text/JavaScript">
  7. function frowspan(direccion){
  8. if(direccion=="0"){
  9. document.getElementById("celdalarga").rowSpan+=1;
  10. }else{
  11. document.getElementById("celdalarga").rowSpan-=1;
  12. }
  13. }
  14. </script>
  15.  
  16.  
  17. </head>
  18.  
  19. <body>
  20. <table width="100%" border="1" cellspacing="0" cellpadding="0">
  21.   <tr> 
  22.     <td rowspan="5" id="celdalarga">&nbsp;</td>
  23.     <td>&nbsp;</td>
  24.     <td><input type="button" name="BotEli" value="Eliminar esta"></td>
  25.   </tr>
  26.   <tr> 
  27.     <td>&nbsp;</td>
  28.   </tr>
  29.   <tr> 
  30.     <td>&nbsp;</td>
  31.     <td>&nbsp;</td>
  32.   </tr>
  33.   <tr> 
  34.     <td>&nbsp;</td>
  35.     <td><input type="button" name="Submit2" value="Eliminar esta"></td>
  36.   </tr>
  37.   <tr> 
  38.     <td><input type="button" name="Submit3" value="Agregar una"  onclick="frowspan('0')"></td>
  39.     <td><input type="button" name="veurerowspan" value="Quitar una" onclick="frowspan('1')"></td>
  40.   </tr>
  41. </table>
  42.  
  43. </body>
  44. </html>

Este es mio


Yo me plantearia muy seriamente la opcion que te ha dado CHuLoSoY.

Quim
  #6 (permalink)  
Antiguo 21/12/2009, 10:01
 
Fecha de Ingreso: enero-2009
Mensajes: 12
Antigüedad: 16 años
Puntos: 0
Respuesta: Controlar atributo rowSpan de una tabla a través de javascript
Cita:
Iniciado por quimfv Ver Mensaje
Javascript distingue mayúsculas de minúsculas...

rowSpan no rowspan


Código HTML: 
Ver original
  1. <html>
  2. <body>
  3. <script language="JavaScript">
  4. function function1() {
  5.     document.getElementById("myTableHeader").rowSpan += 1;
  6. }
  7. function function2() {
  8.     location.reload();
  9. }
  10. </script>
  11. <table width="542" border="10" bordercolor="red" cellpadding="20">
  12.     <tr>
  13.         <th id="myTableHeader">Cell 1</th>
  14.         <th>Cell 2</th>
  15.         <th id="th5">Cell 3</th>
  16.     </tr>
  17.     <tr>
  18.         <th>Cell 4</th>
  19.         <th id="th2">Cell 5</th>
  20.         <th>Cell 6</th>
  21.     </tr>
  22.     <tr>
  23.         <th>Cell 7</th>
  24.         <th>Cell 8</th>
  25.         <th>Cell 9</th>
  26.     </tr>
  27.     <tr>
  28.         <th >Cell 10</th>
  29.         <th >Cell 11</th>
  30.         <th >Cell 12</th>
  31.     </tr>
  32. </table>
  33. <input type="button" value="Span(2) Cell 1" onClick="function1();">
  34. <input type="button" value="Restore" onClick="function2();">
  35. </body>
  36. </html>

Esto hace lo que pides pero, no del todo!!! (he modificado un poco el ejemplo que dan [URL="http://www.java2s.com/Code/JavaScriptReference/Javascript-Properties/rowSpan.htm"]aqui[/URL])

Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Documento sin t&iacute;tulo</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <script language="JavaScript" type="text/JavaScript">
  7. function frowspan(direccion){
  8. if(direccion=="0"){
  9. document.getElementById("celdalarga").rowSpan+=1;
  10. }else{
  11. document.getElementById("celdalarga").rowSpan-=1;
  12. }
  13. }
  14. </script>
  15.  
  16.  
  17. </head>
  18.  
  19. <body>
  20. <table width="100%" border="1" cellspacing="0" cellpadding="0">
  21.   <tr> 
  22.     <td rowspan="5" id="celdalarga">&nbsp;</td>
  23.     <td>&nbsp;</td>
  24.     <td><input type="button" name="BotEli" value="Eliminar esta"></td>
  25.   </tr>
  26.   <tr> 
  27.     <td>&nbsp;</td>
  28.   </tr>
  29.   <tr> 
  30.     <td>&nbsp;</td>
  31.     <td>&nbsp;</td>
  32.   </tr>
  33.   <tr> 
  34.     <td>&nbsp;</td>
  35.     <td><input type="button" name="Submit2" value="Eliminar esta"></td>
  36.   </tr>
  37.   <tr> 
  38.     <td><input type="button" name="Submit3" value="Agregar una"  onclick="frowspan('0')"></td>
  39.     <td><input type="button" name="veurerowspan" value="Quitar una" onclick="frowspan('1')"></td>
  40.   </tr>
  41. </table>
  42.  
  43. </body>
  44. </html>

Este es mio


Yo me plantearia muy seriamente la opcion que te ha dado CHuLoSoY.

Quim

Es justo lo que necesitaba,

gracias a todos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 14:39.