0
For example: I have this function that checks if the checkbox is checked, but it works in general and not individually since these components are within a table, the components are generated in this way:
var table = $('#tableproduct').DataTable();
results.Nfe.Produtos.forEach(function (element) {
var rowNode = table
.row.add(['<input type="checkbox" name="check" onChange="verificarCheckBox() " />',
element.Codigo,
element.Descricao,
'<input type="number" class="form-control " style="text-align:right; margin: 3px;" value=' + element.ValorUnitario + ' id="valor" onChange="calcular()" readonly /> ',
'<input type="number" class="form-control" style="text-align:right; margin: 3px;" value= ' + element.Qtd + ' id = "quantidade" readonly onChange="calcular() "/>',
'<input type="number" class="form-control " style="text-align:right; width: 177px; margin: 3px;" value="0" id="quantidade_devolvida" readonly onChange="calcular(), verificarCheckBox()"/>',
'<input type = "number" class= "form-control" style = "text-align:right; margin: 3px;" value="0" id="var_qnt" onChange="calcular()" readonly />'
])
.draw()
.node();
And the function that checks the checkbox is this one:
function verificarCheckBox() {
var check = document.getElementsByName("check");
for (var i = 0; i < check.length; i++) {
if (check[i].checked == true)
{
document.getElementById("quantidade_devolvida").readOnly = false;
document.getElementById("quantidade_devolvida").style.borderColor = "rgba(60, 141, 188, 0.5)";
document.getElementById("quantidade_devolvida").style.boxShadow = "rgba(60, 141, 188, 0.77) 0px 0px 6px";
}
else if (check[i].checked == false)
{
document.getElementById("quantidade_devolvida").value = 0;
document.getElementById("var_qnt").value = 0;
document.getElementById("quantidade_devolvida").readOnly = true;
document.getElementById("quantidade_devolvida").style.borderColor = "rgba(154, 154, 154, 0.51)";
document.getElementById("quantidade_devolvida").style.boxShadow = "rgb(253, 250, 250) 0px 0px 6px";
}
}
}
the elements are all with the same ID?
– Alvaro Alves
Yes, they are, yes.
– Daniel Rezende
Try using an id for each :D element
– Alvaro Alves
So my friend, the problem is that these lines are generated automatically, there would be no way to create the components with different ids. Would you have any other alternative?
– Daniel Rezende
When you do that:
document.getElementById("quantidade_devolvida").value = 0;
, is referencing the element with idquantidade_devolvida
, that is, as all elements have the same ID it adopts this behavior.. you would post the table html after created?– Alvaro Alves
The table that is generated is a datatable and the rows are generated in this table dynamically as shown in the first code.
– Daniel Rezende
take a look at this thumb drive
– Alvaro Alves
On the pen the code is working perfectly, but when I put it into production in my application the error: "Uncaught Typeerror: Cannot read Property 'childNodes' of Undefined" is introduced, would know how to help me fix this problem?
– Daniel Rezende
i would need an example of the html generated from your table after the page is rendered
– Alvaro Alves
Actually your big problem is in defining multiple id’s equal.. Take a look at this one another question of stackoverflow itself
– Alvaro Alves