JSFiddle - React, Tailwind, and code Playground

by Alexis LĂłpez Espinoza

HTML

<table>
	<tr>
		<td>Fila 1</td>
	</tr>
	<tr>
		<td>Fila 2</td>
	</tr>
	<tr>
		<td>Fila 3</td>
	</tr>
</table>

CSS

.colorea{
	background: red;
	color: white;
}

table, table *{
	border: .1rem solid;
}

td:hover{
	cursor: pointer;
}

JavaScript

$("tr").on("click", function(){
    var existe = $("tr.colorea").length;
    if (!existe && !$(this).hasClass()){
        $(this).addClass("colorea");
    }
    else{
        if (existe){
            var cont1 = $("tr.colorea td").html(),
                cont2 = $(this).find("td").html();
            $("tr.colorea td").html(cont2);
            $(this).find("td").html(cont1);
        }
    }
});