JSFiddle - React, Tailwind, and code Playground

by rodrigorf

HTML

<table id="ContentPlaceHolder1_dtlCandidatos" class="candidatos" cellpadding="2" cellspacing="3">
				<tbody><tr>
					<td>
                            <table id="TB_TYHE" class="eleitores" border="0">
                                <tbody>
                                    <tr>
                                        <td style="width:20px;">
                                                
                                            <a id="TYHE" class="candidato" href="#">
                                                <img src=" HTTP://APL.TI.PETROBRAS.COM.BR/FOTOS/09755775.jpg" alt="Click na foto para selecionar o candidato" border="0" height="80" width="80">
                                            </a>
                                        </td>
                                        <td>
                                            <table>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <b>Nome:</b>&nbsp;&nbsp;Andre
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <b>Lotação:</b>&nbsp;&nbsp;TIC/CPIE/TIC-SEAL                                             
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <b>Chave:</b>&nbsp;&nbsp;TYHE
                                                        </td>
                                                    </tr>
                              ...

CSS

.eleitores table td{
    background:none;
    color:#000;
    padding-left:7px;
}

.eleitorSelecionado{
	font: normal 12px tahoma;
	color:#000;
	text-align:left;
}

.eleitorSelecionado b{
	
	color:#FFB200;
}

.eleitorSelecionado img{
	border: 1px solid #427041;
	
}

.eleitorSelecionado{
	border: 3px solid #FFB200;

	background-color:#FFB200;
}

JavaScript

$('.candidato').click(function(){
    //alert($(this).attr("class"));

    $(".eleitorSelecionado").each(function(index) {
        //alert("Item qe tava marcado:" + $(this).attr("class"));
        $(this).attr('class', 'candidato');
    });
    
    $('#TB_' + $(this).attr('id')).attr('class', 'eleitorSelecionado');
});