insertBefore no: quiero un insertAfter!

AlZuwaga · #1 (**permalink**) 30/07/2007, 15:09

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>

#2 (**permalink**) 30/07/2007, 17:20

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.

caricatos · #3 (**permalink**) 30/07/2007, 20:35

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

derkenuke · #4 (**permalink**) 31/07/2007, 08:09

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

Código PHP:

  function insertAfter(parent, node, referenceNode) {
  parent.insertBefore(node, referenceNode.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.

#5 (**permalink**) 31/07/2007, 08:32

Creo que el aporte de caricatos es mejor: ¿qué pasa si el "referenceNode" no tiene un nodo hermano?

AlZuwaga · #6 (**permalink**) 31/07/2007, 11:33

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