My doubt is conceptual. I have a script that generates new rows for a table. I need to apply functions to the individual rows, but as the new rows are clones from the first rotate in to adjust these functions individually. Is there a way to individualize this table?
As suggested follows part of my code instruction.
<table data-spy="scroll" class = "small-1 " id="table-prem" >
<thead>
<tr style="background-color: #e8e8e8;">
<th scope="col" >CPF</th>
<th scope="col" >NOME</th>
<th scope="col" >Premio Base</th>
<th scope="col" >Falta Just.</th>
<th scope="col" >Falta Injut.</th>
<th scope="col" >Premio Final</th>
<th scope="col" >Observação</th>
<th scope="col"></th>
</tr>
</thead>
<tbody >
<tr>
<td><input type="text" id="cpf" style="width: 150" name="cpf" min="0" required ></td>
<td><input type="number" class="" name="premio_base" style="width: 100" id="premio_base" required></td>
<td><input type="number" class="" name="faltas_just" style="width: 100" id="falta_just" ></td>
<td><input type="number" class="" name="faltas_inju" style="width: 100" id="falta_injus" ></td>
<td><input type="number" class="" name="premio_final" style="width: 100" id="premio_final" required></td>
<td><input type="text" class="" name="obs" id="obs" style="width: 300" placeholder="Digite suas Observações"></td>
<td>
<button onclick="deleteRow(this.parentNode.parentNode.rowIndex)" type="button" class="btn btn-danger btn-sm-0"><i class="fa fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
and I have these functions that are not working right
<script type="text/javascript">
(function($) {
//clone da table
AddTableRow = function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" id="cpf" style="width: 150" name="0_cpf" min="0" required ></td>';
cols += '<td><input type="number" class="" name="premio_base" style="width: 100" id="premio_base" required></td>';
cols += '<td><input type="number" class="" name="faltas_just" style="width: 100" id="falta_just" ></td>';
cols += '<td><input type="number" class="" name="faltas_inju" style="width: 100" id="falta_injus" ></td>';
cols += '<td><input type="number" class="" name="premio_final" style="width: 100" id="premio_final" required></td>';
cols += '<td><input type="text" class="" name="obs" id="obs" style="width: 300" placeholder="Digite suas Observações"></td>';
cols += '<td>';
cols += ' <button onclick="deleteRow(this.parentNode.parentNode.rowIndex)" type="button" class="btn btn-danger btn-sm-0"><i class="fa fa-trash"></i></button>';
cols += '</td>';
newRow.append(cols);
$("#table-prem").append(newRow);
$(document).ready(function() {
var base = [
{% for funcionario in funcionario %}
"{{funcionario.CPF}}",
{% endfor %}
];
$('input[name=0_cpf]').autocomplete({
source: base
});
});
$(function () {
// Oculta as opções do segundo select:
$("#nome option").hide();
// Observa o evento change do primeiro select:
$('input[name=0_cpf]').on("blur",
function () {
// Recupera o valor selecionado:
let course = $('input[name=0_cpf]').val();
$('select[name=0_nome]').val(course)
// Exibe as opções conforme a seleção:
$("#nome option[data-course='"+ course +"']").show();
});
});
};
})(jQuery);
</script>
I even tried to create an "auto-id" (0_cpf) because I read somewhere that needed to be done that way, but it is not working either.