I have a table with three columns, one for "Species", one for "Quantity" and one for options. The quantity field can be changed when the change button is clicked, the change button is hidden to show the save button.
<table class="table">
....
<tr>
<td>Espécie 1 </td>
<td>
<span id="sQtde_1">10 </span>
<input type="text" id="txtQtde_1" value"10" class="form-control hide">
</td>
<td>
<button type="button" value="1" class="btn">Alterar</button>
<button type="button" id="btnSalvar_1" value="1" class="btn hide">Salvar</button>
</td>
</tr>
</table>
<script>
function alterar(botao) {
var n = $(botao).val();
$("#txtQtde_" + n).toggleClass('hide');
$("#sQtde_" + n).toggleClass('hide');
$("#btnSalvar_" + n).toggleClass('hide');
$(button).toggleClass('hide');
}
</script>
Does this kind of practice of hiding / displaying elements with CSS may be bad in terms of accessibility for example for blind users?