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>