1

soy nuevo en la programación y necesito que alguien me pueda orientar. Encontré este tipo de tabla, de la cual se pueden seleccionar filas hacia una segunda tabla.

Lo que necesito saber es como copiar los datos de la fila seleccionada de la tabla2, para que luego se ingresen automaticamente a los input. ¿Existe alguna función para eso?

var oneTbody = document.querySelector("#one tbody"), //Cuerpo de la primera tabla
twoTbody = document.querySelector("#two tbody"), //Cuerpo de la segunda tabla
copy = document.querySelector("#copy"), //Botón que copiará los datos de las filas seleccionadas
seleccion = [], //Arreglo que almacenará a las filas seleccionadas
seleccionar = function(event){ //Función a ejecutarse para seleccionar una fila
    if (event.target.tagName == "TD"){ //Si se pulsó una celda
        var fila = event.target.parentNode; //Se almacena en una variable a la fila que la contiene
        
        //Si no está seleccionada
        if (fila.dataset.selected < 1){
            fila.style.backgroundColor = "red"; //Se la pinta de rojo
            fila.style.color = "white"; //Con un texto en blanco
            fila.dataset.selected = 1; //Se asigna el valor 1 al pseudoatributo "data-selected"
            seleccion.push(fila); //Se añade la fila al arreglo de filas seleccionadas
        }
        //Si está seleccionada
        else{
            fila.style.backgroundColor = ""; //Se retira el color de fondo
            fila.style.color = ""; //Y el del texto
            fila.dataset.selected = 0; //El valor del pseudoatributo retorna a 0
            seleccion.splice(seleccion.indexOf(fila), 1); //Se elimina la fila del arreglo  
        }           
    }
},
copiar = function(){ //Función a ejecutarse para copiar los datos de las filas seleccionadas en la segunda tabla
    if (seleccion.length){ //Si hay filas seleccionadas
        for (var i = 0, l = seleccion.length; i < l; i++){ //Se recorre a dicho conjunto
            var tr = twoTbody.insertRow(), //Se inserta una nueva fila en la segunda tabla
                celdas = seleccion[i].querySelectorAll("td"); //Se toma a las celdas de la fila seleccionada actual en el bucle
 
            for (var j = 0, m = celdas.length; j < m; j++){ //Se recorre a dicho conjunto de celdas
                var td = tr.insertCell(); //Se añade una nueva celda en la nueva fila de la segunda tabla
                td.innerHTML = celdas[j].innerHTML; //Se copia el texto de la celda de la fila seleccionada a la nueva celda
            }
 
            //La fila seleccionada retorna a su estado inicial
            seleccion[i].style.backgroundColor = "";
            seleccion[i].style.color = "";
            seleccion[i].dataset.selected = 0;
        }
 
        //Se eliminan a las filas seleccionadas del arreglo
        seleccion.length = 0;
    }
};

//Cuando se produzca el evento "click" en la primera tabla, se ejecutará la función "callback"
oneTbody.addEventListener("click", seleccionar, false);
 
//Cuando se pulse el botón, se ejecutará el siguiente conjunto de instrucciones
copy.addEventListener("click", copiar, false);
#one {
  cursor:pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
   <table id="one" border="1">
	<thead>TABLA1
		<tr>
			<th>Nombre</th>
			<th>Apellido</th>
			<th>Edad</th>
		</tr>
	</thead>
	<tbody>
		<tr data-selected="0">
			<td>Javier</td>
			<td>Paz</td>
			<td>45</td>
		</tr>
		<tr data-selected="0">
			<td>Ana</td>
			<td>Garrido</td>
			<td>38</td>
		</tr>
		<tr data-selected="0">
			<td>Orlando</td>
			<td>Delgado</td>
			<td>31</td>
		</tr>
	</tbody>
</table>
<br>
<button id=copy >Copiar</button>
<br><br>
<table id="two" border="1">
	<thead>TABLA 2
		<tr>
			<th>Nombre</th>
			<th>Apellido</th>
			<th>Edad</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>
</body>
<br>
<button id=copy >desde tabla 2, añadir a los input</button>


<h5>Nombre: </h5><input type=text id=nombre value="">
<h5>Apellido: </h5><input type=text id=nombre value="">
<h5>Edad: </h5><input type=text id=nombre value="">


</html>

1 respuesta 1

1

No me quedo claro si debe añadirse automáticamente los datos a los inputs o si se debe dar click en el botón "desde tabla 2, añadir a los input" para añadir los datos a los inputs, supuse que para la segunda tabla solo se debería poder elegir una fila ya que solo se cuenta con los inputs para una fila. Así que te dejo la función que podrías utilizar para que cuando des click en la fila de la segunda tabla se añada automáticamente los valores en los inputs:

escribirInputs = function(event){ 
    if (event.target.tagName == "TD"){ 
        var fila = event.target.parentNode; la contiene
        nombre.value = fila.children[0].innerHTML // toma el primer valor de la fila
        apellido.value = fila.children[1].innerHTML // toma el segundo valor de la fila
        edad.value = fila.children[2].innerHTML // toma el tercer valor de la fila
    }
};

Recuerda declarar las variables de los inputs

nombre = document.getElementById("nombre")
apellido = document.getElementById("apellido")
edad = document.getElementById("edad")

Además tendrías que añadir en el archivo de javascript el listener para que escuche el evento de click al igual que con las funciones seleccionar y copiar.

twoTbody.addEventListener("click", escribirInputs, false)

Nota: Recueda que todos las etiquetas del contenido de la página deben ir dentro de las etiquetas <body></body> y que los valores de los atributos de las etiquetas html llevan comillas dobles.

1
  • Gracias Isra, definitivamente era lo que necesitaba.. lamento no poder expresar bien la pregunta. Ahora tengo más claro este tipo de funciones.
    – h6gignacio
    el 6 ago. 2019 a las 5:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.