4
I have a problem, I made a dynamic table in Javascript and I want to play your data in an array, I tried to use JSON but when I click on the button to run the event it does nothing. I don’t know if any plugin is missing, because I had never worked with JSON, follow the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/jquery.validate.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<!-- Aqui esta o meu script para criar a tabela -->
<title> Controle de Material </title>
<script type="text/javascript">
totals = 0;
function adiciona() {
totals++
var tbl = document.getElementById("tabelaPedido");
var novaLinha = tbl.insertRow(-1);
var novaCelula;
if(totals%2==0)
cl = "#FFFFFF";
else
cl = "##FFFFFF";
novaCelula = novaLinha.insertCell(0);
novaCelula.align = "left";
novaCelula.style.backgroundColor = cl;
novaCelula.innerHTML = document.getElementById('cprod').value;
totals;
novaCelula = novaLinha.insertCell(1);
novaCelula.align = "left";
novaCelula.style.backgroundColor = cl;
novaCelula.innerHTML = document.getElementById('cquant').value;
novaCelula2 = novaLinha.insertCell(2);
novaCelula.align = "left";
novaCelula.style.backgroundColor = cl;
var btnEl = document.createElement('input');
btnEl.setAttribute('type', 'button');
btnEl.setAttribute('class', 'btn');
btnEl.onclick = function () {
deleteRow(this.parentNode.parentNode.rowIndex)
};
btnEl.setAttribute('value', 'Delete');
novaCelula2.appendChild(btnEl);
}
//Função para excluir a linha
function deleteRow(i) {
document.getElementById('tabelaBanco').deleteRow(i)
}
function pedido() {
// Percorrer todas as linhas do corpo da tabela
$('#tabelaPedido tbody tr').each(function () {
// Recuperar todas as colunas da linha percorida
var colunas = $(this).children();
var pedidos = [];
// Criar objeto para armazenar os dados
var pedido = {
'produto': $(colunas[0]).text(), // valor da coluna Produto
'quantidade': $(colunas[1]).text() // Valor da coluna Quantidade
};
// Adicionar o objeto pedido no array
pedidos.push(pedido);
});
// listando os pedidos função teste
alert(pedidos);
alert("esta funcionando");
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td><p>Produto:</p></td>
<td><p>Quantidade</p></td>
</tr>
<tr>
<td><input type="text" name="produto" id="cprod"></td>
<td><input type="text" name="quantidade" id="cquant"></td>
<td><input type='button' id='incluir' class="btn" value='Incluir Produto' onclick='adiciona()'/></td>
</tr>
</table>
<table id='tabelaPedido' class="table table-hover" border='0' width='100%'>
<thead>
<tr style='background-color:#FBF6F7'>
<td class="produto"><strong>Produto</strong></td>
<td class="quantidade"><strong>Quantidade</strong></td>
<td><strong>Excluir</strong></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br>
<!-- chamando a função para pegar os dados e imprimir na telana -->
<input class="btn" type = "submit" name = "but" value = "Confirmar Pedido" onclick='pedido()'/>
<br>
<br>
<br>
</form>
</body>
</html>
seeing your suggestion, I remembered that I could use a
handleEventto help in the organization of my own example. as for his example, became very good, just did not understand the need to assign a valueinlineto theonclick, Even you do it in Java itselfbtn.setAttribute('onclick', 'produtos.excluir(event, this);');– Tobias Mesquita
@Tobymosque This! I just looked at your example, it’s cool! I didn’t use the
onclickinline by sloth... rsrs! Thank you.– Lucas Fontes Gaspareto
Thank you very much for your attention but the add event is not working which plugins need to work with json and jquery ?
– Bruno Nascimento