JSFiddle - React, Tailwind, and code Playground

by Alexis LĂłpez Espinoza

HTML

<table id="one">
	<thead>
		<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>

<span id="copy">Copiar</span>

<table id="two">
	<thead>
		<tr>
			<th>Nombre</th>
			<th>Apellido</th>
			<th>Edad</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>

CSS

td{
	text-align: center;
}

td:hover{
	cursor: pointer;
}

#copy{
	background: green;
	color: white;
	cursor: pointer;
	display: inline-block;	
	padding: .24rem .5rem;
	border-radius: .5rem;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
}

#copy:hover{
	filter: brightness(1.2);
	-webkit-filter: brightness(1.2);
	-moz-filter: brightness(1.2);
	-o-filter: brightness(1.2);
}

JavaScript

var oneTbody = document.querySelector("#one tbody"),
	twoTbody = document.querySelector("#two tbody"),
	copy = document.querySelector("#copy"),
	seleccion = [],
	seleccionar = function(event){
		if (event.target.tagName == "TD"){
			var fila = event.target.parentNode;
			
			if (fila.dataset.selected < 1){
				fila.style.backgroundColor = "red";
				fila.style.color = "white";
				fila.dataset.selected = 1;
				seleccion.push(fila);
			}
			else{
				fila.style.backgroundColor = "";
				fila.style.color = "";
				fila.dataset.selected = 0;
				seleccion.splice(seleccion.indexOf(fila), 1);				
			}			
		}
	},
	copiar = function(){
		if (seleccion.length){
			for (var i = 0, l = seleccion.length; i < l; i++){
				var tr = twoTbody.insertRow(),
					celdas = seleccion[i].querySelectorAll("td");

				for (var j = 0, m = celdas.length; j < m; j++){
					var td = tr.insertCell();				
					td.innerHTML = celdas[j].innerHTML;
				}

				seleccion[i].style.backgroundColor = "";
				seleccion[i].style.color = "";
				seleccion[i].dataset.selected = 0;
			}

			seleccion.length = 0;
		}
	};
	
oneTbody.addEventListener("click", seleccionar, false);
copy.addEventListener("click", copiar, false);