Foros del Web » Programando para Internet » Javascript »

insertBefore no: quiero un insertAfter!

Estas en el tema de insertBefore no: quiero un insertAfter! en el foro de Javascript en Foros del Web. Buenas, dado el siguiente código... Código: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Manipular una tabla</title> ...
  #1 (permalink)  
Antiguo 30/07/2007, 15:09
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 23 años, 9 meses
Puntos: 535
insertBefore no: quiero un insertAfter!

Buenas, dado el siguiente código...


Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Manipular una tabla</title>
<script type="text/javascript">
function getElementsByClassName(strClass, strTag, objContElm) {
//Obtenida de: http://muffinresearch.co.uk/archives/2006/04/29/getelementsbyclassname-deluxe-edition/
  strTag = strTag || "*";
  objContElm = objContElm || document;    
  var objColl = objContElm.getElementsByTagName(strTag);
  if (!objColl.length &&  strTag == "*" &&  objContElm.all) objColl = objContElm.all;
  var arr = new Array();                              
  var delim = strClass.indexOf('|') != -1  ? '|' : ' ';   
  var arrClass = strClass.split(delim);    
  for (var i = 0, j = objColl.length; i < j; i++) {                         
    var arrObjClass = objColl[i].className.split(' ');   
    if (delim == ' ' && arrClass.length > arrObjClass.length) continue;
    var c = 0;
    comparisonLoop:
    for (var k = 0, l = arrObjClass.length; k < l; k++) {
      for (var m = 0, n = arrClass.length; m < n; m++) {
        if (arrClass[m] == arrObjClass[k]) c++;
        if ((delim == '|' && c == 1) || (delim == ' ' && c == arrClass.length)) {
          arr.push(objColl[i]); 
          break comparisonLoop;
        }
      }
    }
  }
  return arr; 
}

function prepara_tabla(){
	var tabla = document.getElementById('mi_tabla');
	var filas = tabla.rows;
	for(i = 0; i < filas.length; i++){
		la_celda = filas[i].cells[filas[i].cells.length - 1];
		la_celda.style.display = 'none';
		if(la_celda.nodeName == 'TD'){
			filas[i].setAttribute('class', 'az_fila_origen');
		}
	}
	crea_copias('az_fila_origen');
}

function crea_copias(laClase){
	var filas = getElementsByClassName(laClase);
	for(i = 0; i < filas.length; i++){
		nuevo_row = document.createElement('tr');
			nuevo_cell = document.createElement('td');
			nuevo_cell.setAttribute('colspan', '4');
				nuevo_cell_texto = document.createTextNode(filas[i].cells[filas[i].cells.length - 1].textContent);
			nuevo_cell.appendChild(nuevo_cell_texto);
		nuevo_row.appendChild(nuevo_cell);
		filas[i].parentNode.insertBefore(nuevo_row, filas[i]);
	}
}

window.onload = prepara_tabla;
</script>
</head>

<body>
<h1>Manipular una tabla</h1>
<table border="1" cellspacing="0" cellpadding="5" id="mi_tabla">
  <tr>
    <th scope="col">Enc 1</th>
    <th scope="col">Enc 2</th>
    <th scope="col">Enc 3</th>
    <th scope="col">Enc 4</th>
    <th scope="col">Enc 5</th>
  </tr>
  <tr>
    <td>Dato 1.1</td>
    <td>Dato 1.2</td>
    <td>Dato 1.3</td>
    <td>Dato 1.4</td>
    <td>Descripci&oacute;n del dato 1</td>
  </tr>
  <tr>
    <td>Dato 2.1</td>
    <td>Dato 2.2</td>
    <td>Dato 2.3</td>
    <td>Dato 2.4</td>
    <td>Descripci&oacute;n del dato 2</td>
  </tr>
</table>
</body>
</html>
... me gustaría saber cómo colocar el <tr> generado al vuelo debajo (o después) del <tr> y no antes como ocurre actualmente. La línea conflictiva es la que está en negritas en el código. Sé que el insertAfter no existe, pero seguro hay alguna manera de poder hacer lo que pretendo... ¿no?

Un saludo

EDIT: Además, tuve que hacer dos funciones... una para ocultar la última celda de cada columna y otra para generar el <tr><td colspan="4">texto</td></tr> debido a que, no sé si por un error mío o qué, entraba en un bucle infinito

EDIT 2: Me acabo de dar cuenta que no funciona en IE6... oculta el último <td> de cada fila existente en el código HTML pero no "crea" el nuevo <tr>

Última edición por AlZuwaga; 30/07/2007 a las 15:28
  #2 (permalink)  
Antiguo 30/07/2007, 17:20
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Re: insertBefore no: quiero un insertAfter!

Yo solucioné un tema similar usando nextSibling.

Tenía que hacer un formulario de búsqueda por varios criterios, y le puse un enlace "agregar criterio", con algo así:

elemento_original.parentNode.insertBefore(elemento , elemento_original.nextSibling);

Con lo que inserta inmediatamente después del elemento. Claro que solo funciona si realmente hay un "nextSibling", es decir, un nodo "hermano" luego del que estás tomando. En tu caso, si hay más filas debajo, no habrá problemas...


Saludos.
  #3 (permalink)  
Antiguo 30/07/2007, 20:35
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Re: insertBefore no: quiero un insertAfter!

Hola:

Código:
<html>
<head>
<script>
function mensaje(elemento, dato) {
 x = document.createTextNode(dato);
 with(elemento.parentNode)
  (lastChild == elemento) ? appendChild(x) : insertBefore(x, elemento.nextSibling);
}
</script>
</head>
<body>
<div onclick="mensaje(this, 'hola')" >pinchame</div>
</body>
</html>
Es lo que propone alvlin controlando que haya un nextSibling.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 31/07/2007, 08:09
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 21 años, 1 mes
Puntos: 45
Re: insertBefore no: quiero un insertAfter!

Sí, pero googleando se encuentra en seguida la susodicha función:

Código PHP:
function insertAfter(parentnodereferenceNode) {
  
parent.insertBefore(nodereferenceNode.nextSibling);

Aunque al fin y al cabo viene a ser lo mismo que lo que se ha planteado antes, sólo mencionar que sí existe (sólo que no comprueba que exista nextSibling...).


Un saludo.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #5 (permalink)  
Antiguo 31/07/2007, 08:32
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Re: insertBefore no: quiero un insertAfter!

Creo que el aporte de caricatos es mejor: ¿qué pasa si el "referenceNode" no tiene un nodo hermano?
  #6 (permalink)  
Antiguo 31/07/2007, 11:33
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 23 años, 9 meses
Puntos: 535
Re: insertBefore no: quiero un insertAfter!

Grande! Quedó así:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Manipular una tabla</title>
<script type="text/javascript">
function getElementsByClassName(strClass, strTag, objContElm) {
//Obtenida de: http://muffinresearch.co.uk/archives/2006/04/29/getelementsbyclassname-deluxe-edition/
  strTag = strTag || "*";
  objContElm = objContElm || document;    
  var objColl = objContElm.getElementsByTagName(strTag);
  if (!objColl.length &&  strTag == "*" &&  objContElm.all) objColl = objContElm.all;
  var arr = new Array();                              
  var delim = strClass.indexOf('|') != -1  ? '|' : ' ';   
  var arrClass = strClass.split(delim);    
  for (var i = 0, j = objColl.length; i < j; i++) {                         
    var arrObjClass = objColl[i].className.split(' ');   
    if (delim == ' ' && arrClass.length > arrObjClass.length) continue;
    var c = 0;
    comparisonLoop:
    for (var k = 0, l = arrObjClass.length; k < l; k++) {
      for (var m = 0, n = arrClass.length; m < n; m++) {
        if (arrClass[m] == arrObjClass[k]) c++;
        if ((delim == '|' && c == 1) || (delim == ' ' && c == arrClass.length)) {
          arr.push(objColl[i]); 
          break comparisonLoop;
        }
      }
    }
  }
  return arr; 
}

function prepara_tabla(){
	var tabla = document.getElementById('mi_tabla');
	var filas = tabla.rows;
	for(i = 0; i < filas.length; i++){
		la_celda = filas[i].cells[filas[i].cells.length - 1];
		la_celda.style.display = 'none';
		if(la_celda.nodeName == 'TD'){
			filas[i].setAttribute('class', 'az_fila_origen');
		}
	}
	crea_copias('az_fila_origen');
}

function crea_copias(laClase){
	var filas = getElementsByClassName(laClase);
	for(i = 0; i < filas.length; i++){
		nuevo_row = document.createElement('tr');
			nuevo_cell = document.createElement('td');
			nuevo_cell.setAttribute('colspan', '4');
				nuevo_cell_texto = document.createTextNode(filas[i].cells[filas[i].cells.length - 1].textContent);
			nuevo_cell.appendChild(nuevo_cell_texto);
		nuevo_row.appendChild(nuevo_cell);
		// comienza código de caricatos para emular un insertAfter \\
		if(filas[i].parentNode.lastChild == filas[i]){
			filas[i].parentNode.appendChild(nuevo_row);
		}
		else{
			filas[i].parentNode.insertBefore(nuevo_row, filas[i].nextSibling);
		}
		// finaliza código de caricatos para emular un insertAfter \\
	}
}

window.onload = prepara_tabla;
</script>
</head>

<body>
<h1>Manipular una tabla</h1>
<table border="1" cellspacing="0" cellpadding="5" id="mi_tabla">
  <tr>
    <th scope="col">Enc 1</th>
    <th scope="col">Enc 2</th>
    <th scope="col">Enc 3</th>
    <th scope="col">Enc 4</th>
    <th scope="col">Enc 5</th>
  </tr>
  <tr>
    <td>Dato 1.1</td>
    <td>Dato 1.2</td>
    <td>Dato 1.3</td>
    <td>Dato 1.4</td>
    <td>Descripci&oacute;n del dato 1</td>
  </tr>
  <tr>
    <td>Dato 2.1</td>
    <td>Dato 2.2</td>
    <td>Dato 2.3</td>
    <td>Dato 2.4</td>
    <td>Descripci&oacute;n del dato 2</td>
  </tr>
</table>
</body>
</html>
Lo que todavía no entiendo es por qué no funciona en IE6... ¿usé algún código que IE no interprete? ¿Alguien me ayuda a encontrarlo?

Saludos
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




La zona horaria es GMT -6. Ahora son las 18:47.