1
I’m developing a system of employee metrics, performance evaluation, I have <div>
'which have been set in table form on my form to qualify each option as Rare, Sometimes, frequent, at all times or N/A.
The point is I don’t know if there’s any possibility of getting me to select a <div>
column Rare, for example, and then changing the selection to At all times remake the selection by removing the previous one. Remembering that when selecting the div
changes to the color corresponding to the column (this working but is coloring the entire table so I want to do as radio button, but I don’t know how to do it).
PHP code that generates HTML:
<?php
$count = 1;
foreach($agrupadores as $agrupador){
<div class="row" style='margin-bottom: 30px;'>
<div class="col-xs-12" style="border:solid 1px #6495ED;padding:25px;">
<b>$agrupador['mea_titulo']</b>
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-6"></div>
foreach($alternativas[$agrupador['mea_codigo']] as $alternativa){
<div class="col-xs-1">$alternativa['mat_titulo']</div>
}
</div>
foreach($opcoes[$agrupador['mea_codigo']] as $opcao){
<div class="row">
<input type="hidden" name="mop_codigo" id="mop_codigo" value="$opcao['mop_codigo']">
<input type="hidden" name="mat_codigo" id="mat_codigo" value="">
<div class="col-xs-1 dv_border heColunas">Q$count></div>
<div class="col-xs-6 dv_border heColunas">$opcao['mop_titulo']</div>
foreach($alternativas[$agrupador['mea_codigo']] as $alternativa){
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="$alternativa['mat_cor']" data-opcao="$opcao['mop_codigo']" data-alternativa="$alternativa['mat_codigo']" data-valor="$alternativa['mat_valor']" data-agrupador="$agrupador['mea_codigo']"> <input type="radio" name="alternativa" id="alternativa" class="alternativa" style="visibility: hidden;"></div>
}
</div>
$count++; }
</div>
</div>
}
?>
HTML generated
$('body').on("click", "#heColunas", function() {
var alternativa = $(this).data("alternativa"); // retorna o código da alternativa da coluna selecionada
var valor = $(this).data("valor"); // retorna o valor da coluna selecionada
var agrupador = $(this).data("agrupador"); // retorna o código do agrupador vinculado à alternativa
var opcao = $(this).data("opcao"); // retorna o código da opção vinculada à alternativa
var cor_alt = $(this).data("cor"); // retorna a cor da alternativa
if (valor == "2") {
$(this).css("background-color", "#" + cor_alt);
} else if (valor == "3") {
$(this).css("background-color", "#" + cor_alt);
} else if (valor == "4") {
$(this).css("background-color", "#" + cor_alt);
} else {
$(this).css("background-color", "#" + cor_alt);
}
});
.dv_border {
border: solid 1px #cccccc;
}
.heColunas {
height: 50px;
padding: 5px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12" id="div_perguntas" style="margin-top:70px;">
<div class="row" style="margin-bottom: 30px;">
<div class="col-xs-12" style="border:solid 1px #6495ED;padding:25px;">
<b>COMPORTAMENTAL</b>
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-6"></div>
<div class="col-xs-1">Raro</div>
<div class="col-xs-1">Às Vezes</div>
<div class="col-xs-1">Frequente</div>
<div class="col-xs-1">Sempre</div>
<div class="col-xs-1">NA</div>
</div>
<div class="row">
<input name="mop_codigo" id="mop_codigo" value="501-1" type="hidden">
<input name="mat_codigo" id="mat_codigo" value="" type="hidden">
<div class="col-xs-1 dv_border heColunas">Q1</div>
<div class="col-xs-6 dv_border heColunas">Executa a carga horária proposta, correspondente a sua função, levando em consideração o horário de entrada, almoço e saída.</div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-1" data-alternativa="501-1" data-valor="2" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-1" data-alternativa="501-2" data-valor="3" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-1" data-alternativa="501-3" data-valor="4" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-1" data-alternativa="501-4" data-valor="5" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-1" data-alternativa="501-5" data-valor="5" data-agrupador="501-1"> </div>
</div>
<div class="row">
<input name="mop_codigo" id="mop_codigo" value="501-2" type="hidden">
<input name="mat_codigo" id="mat_codigo" value="" type="hidden">
<div class="col-xs-1 dv_border heColunas">Q2</div>
<div class="col-xs-6 dv_border heColunas">Possui faltas no período.</div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-2" data-alternativa="501-1" data-valor="2" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-2" data-alternativa="501-2" data-valor="3" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-2" data-alternativa="501-3" data-valor="4" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-2" data-alternativa="501-4" data-valor="5" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-2" data-alternativa="501-5" data-valor="5" data-agrupador="501-1"> </div>
</div>
<div class="row">
<input name="mop_codigo" id="mop_codigo" value="501-3" type="hidden">
<input name="mat_codigo" id="mat_codigo" value="" type="hidden">
<div class="col-xs-1 dv_border heColunas">Q3</div>
<div class="col-xs-6 dv_border heColunas">Se possui faltas, todas são justificadas.</div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-3" data-alternativa="501-1" data-valor="2" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-3" data-alternativa="501-2" data-valor="3" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-3" data-alternativa="501-3" data-valor="4" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-3" data-alternativa="501-4" data-valor="5" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-3" data-alternativa="501-5" data-valor="5" data-agrupador="501-1"> </div>
</div>
<div class="row">
<input name="mop_codigo" id="mop_codigo" value="501-4" type="hidden">
<input name="mat_codigo" id="mat_codigo" value="" type="hidden">
<div class="col-xs-1 dv_border heColunas">Q4</div>
<div class="col-xs-6 dv_border heColunas">É flexível, sabendo se adaptar a todas mudanças que ocorrem.</div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-4" data-alternativa="501-1" data-valor="2" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-4" data-alternativa="501-2" data-valor="3" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-4" data-alternativa="501-3" data-valor="4" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-4" data-alternativa="501-4" data-valor="5" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-4" data-alternativa="501-5" data-valor="5" data-agrupador="501-1"> </div>
</div>
<div class="row">
<input name="mop_codigo" id="mop_codigo" value="501-5" type="hidden">
<input name="mat_codigo" id="mat_codigo" value="" type="hidden">
<div class="col-xs-1 dv_border heColunas">Q5</div>
<div class="col-xs-6 dv_border heColunas">Está sempre disposto a realizar as atividades propostas pelo cliente, pela coordenação ou pela empresa.</div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-5" data-alternativa="501-1" data-valor="2" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-5" data-alternativa="501-2" data-valor="3" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-5" data-alternativa="501-3" data-valor="4" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-5" data-alternativa="501-4" data-valor="5" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-5" data-alternativa="501-5" data-valor="5" data-agrupador="501-1"> </div>
</div>
<div class="row">
<input name="mop_codigo" id="mop_codigo" value="501-6" type="hidden">
<input name="mat_codigo" id="mat_codigo" value="" type="hidden">
<div class="col-xs-1 dv_border heColunas">Q6</div>
<div class="col-xs-6 dv_border heColunas">É receptivo aos feedbacks recebidos.</div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-6" data-alternativa="501-1" data-valor="2" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-6" data-alternativa="501-2" data-valor="3" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-6" data-alternativa="501-3" data-valor="4" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-6" data-alternativa="501-4" data-valor="5" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-6" data-alternativa="501-5" data-valor="5" data-agrupador="501-1"> </div>
</div>
<div class="row">
<input name="mop_codigo" id="mop_codigo" value="501-7" type="hidden">
<input name="mat_codigo" id="mat_codigo" value="" type="hidden">
<div class="col-xs-1 dv_border heColunas">Q7</div>
<div class="col-xs-6 dv_border heColunas">Possui boa Relação com seus colegas de trabalho, subordinados, superiores e cliente.</div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-7" data-alternativa="501-1" data-valor="2" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-7" data-alternativa="501-2" data-valor="3" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-7" data-alternativa="501-3" data-valor="4" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-7" data-alternativa="501-4" data-valor="5" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-7" data-alternativa="501-5" data-valor="5" data-agrupador="501-1"> </div>
</div>
<div class="row">
<input name="mop_codigo" id="mop_codigo" value="501-8" type="hidden">
<input name="mat_codigo" id="mat_codigo" value="" type="hidden">
<div class="col-xs-1 dv_border heColunas">Q8</div>
<div class="col-xs-6 dv_border heColunas">Mantém uma postura calma diante a situações adversas.</div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-8" data-alternativa="501-1" data-valor="2" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-8" data-alternativa="501-2" data-valor="3" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-8" data-alternativa="501-3" data-valor="4" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-8" data-alternativa="501-4" data-valor="5" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-8" data-alternativa="501-5" data-valor="5" data-agrupador="501-1"> </div>
</div>
<div class="row">
<input name="mop_codigo" id="mop_codigo" value="501-9" type="hidden">
<input name="mat_codigo" id="mat_codigo" value="" type="hidden">
<div class="col-xs-1 dv_border heColunas">Q9</div>
<div class="col-xs-6 dv_border heColunas">Participa dos eventos sugeridos pela empresa e estimula a sua equipe a participar.</div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-9" data-alternativa="501-1" data-valor="2" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-9" data-alternativa="501-2" data-valor="3" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-9" data-alternativa="501-3" data-valor="4" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-9" data-alternativa="501-4" data-valor="5" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-9" data-alternativa="501-5" data-valor="5" data-agrupador="501-1"> </div>
</div>
<div class="row">
<input name="mop_codigo" id="mop_codigo" value="501-10" type="hidden">
<input name="mat_codigo" id="mat_codigo" value="" type="hidden">
<div class="col-xs-1 dv_border heColunas">Q10</div>
<div class="col-xs-6 dv_border heColunas">Segue as normas da empresa e faz com que seus subordinados as sigam também.</div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-10" data-alternativa="501-1" data-valor="2" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-10" data-alternativa="501-2" data-valor="3" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-10" data-alternativa="501-3" data-valor="4" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-10" data-alternativa="501-4" data-valor="5" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-10" data-alternativa="501-5" data-valor="5" data-agrupador="501-1"> </div>
</div>
<div class="row">
<input name="mop_codigo" id="mop_codigo" value="501-11" type="hidden">
<input name="mat_codigo" id="mat_codigo" value="" type="hidden">
<div class="col-xs-1 dv_border heColunas">Q11</div>
<div class="col-xs-6 dv_border heColunas">É organizado, mantendo a mesa, diretório e pasta física do projeto dentro dos padrões.</div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-11" data-alternativa="501-1" data-valor="2" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-11" data-alternativa="501-2" data-valor="3" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-11" data-alternativa="501-3" data-valor="4" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-11" data-alternativa="501-4" data-valor="5" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-11" data-alternativa="501-5" data-valor="5" data-agrupador="501-1"> </div>
</div>
<div class="row">
<input name="mop_codigo" id="mop_codigo" value="501-12" type="hidden">
<input name="mat_codigo" id="mat_codigo" value="" type="hidden">
<div class="col-xs-1 dv_border heColunas">Q12</div>
<div class="col-xs-6 dv_border heColunas">Se preocupa em melhorar e se desenvolver cada vez mais.</div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-12" data-alternativa="501-1" data-valor="2" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-12" data-alternativa="501-2" data-valor="3" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-12" data-alternativa="501-3" data-valor="4" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-12" data-alternativa="501-4" data-valor="5" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-12" data-alternativa="501-5" data-valor="5" data-agrupador="501-1"> </div>
</div>
<div class="row">
<input name="mop_codigo" id="mop_codigo" value="501-13" type="hidden">
<input name="mat_codigo" id="mat_codigo" value="" type="hidden">
<div class="col-xs-1 dv_border heColunas">Q13</div>
<div class="col-xs-6 dv_border heColunas">Evita desperdícios e a elevação de custos, tanto para a empresa, quanto para o cliente.</div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-13" data-alternativa="501-1" data-valor="2" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-13" data-alternativa="501-2" data-valor="3" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-13" data-alternativa="501-3" data-valor="4" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-13" data-alternativa="501-4" data-valor="5" data-agrupador="501-1"> </div>
<div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-13" data-alternativa="501-5" data-valor="5" data-agrupador="501-1"> </div>
</div>
</div>
</div>
There’s no way to incorporate inside the
div
oneradio
and enjoy its natural functioning?– Woss
even if it does, only I do not know how to do to only color the one I select =(
– Lucas Pereira
What I intended to do: that the line Divs function as radio Buttons or I clicked on a color the one with its respective color as seen in the code and if to click on another of the same line to modify the usual answer to the times for example discolored the one that was selected and color the new selected as radio button understands.
– Lucas Pereira