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ó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ó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>
