Good afternoon I am trying to make a kind of form where I save some values using sessionStorage and when I return the code, I want to display the values in an html table, but the numbers do not show in an exact sequence, has anyone had this problem?
HTML:
<form><divclass="form-group">
<label>ID:</label>
<input type="text" class="form-control" id="idDigitado" placeholder="id" disabled>
</div>
<div class="form-group">
<label>Valor:</label>
<input type="text" class="form-control" id="valorDigitado" placeholder="valor" required>
</div>
<button type="button" class="btn btn-primary" id="botaoSalva">Salvar</button>
<button type="button" class="btn btn-primary" id="exibeTabela">Exibir Tabela</button>
</form>
<div class="table-responsive">
<table class="table table-striped tabela">
<thead>
<tr>
<th>#</th>
<th>Header</th>
</tr>
</thead>
<tbody id="corpo">
<tr id="conteudoTabela">
<td>asf</td>
</tr>
</tbody>
</table>
</div>
JavaScript:
$(document).ready(function() {
var idDigitado = 0;
var valorDigitado = 0;
var indiceGeral = sessionStorage.length + 1;
$("#idDigitado").val(indiceGeral);
$("#botaoSalva").click(function() {
pegaCampos();
});
function pegaCampos() {
idDigitado = $("#idDigitado").val();
valorDigitado = $("#valorDigitado").val();
$("#alerta").text(idDigitado + "-" + valorDigitado);
salva();
}
function salva() {
sessionStorage.setItem(idDigitado, valorDigitado);
//atualizaTabela();
atualizaIndice();
}
/*
function atualizaTabela(){
for(var i=0; i < sessionStorage.length; i++){
var indice = sessionStorage.key(i);
$("table").append("<tr><td>"+sessionStorage.key(i)+"</td><td>"+sessionStorage.getItem(indice)+"</td></tr>");
}
}
*/
function atualizaIndice() {
var indiceGeral = sessionStorage.length + 1;
$("#idDigitado").val(indiceGeral);
}
$("#exibeTabela").click(function() {
//$(".table").append("<tr><td>"+sessionStorage.key(i)+"</td><td>"+sessionStorage.getItem(indice)+"</td></tr>");
var quantidadeGravada = sessionStorage.length;
for (var i = 0; i <= quantidadeGravada; i += 1) {
var indice = sessionStorage.key(i);
var linha = "<tr><td>" + indice + "</td></tr>";
$(".tabela").append(linha);
var quantidadeLinhas = $(".tabela tbody tr").length;
console.log(quantidadeLinhas);
}
});
});