附加錯誤動態表

Question

我在開發動態表時遇到問題，問題是美觀。 每次用戶單擊“添加產品”時，代碼應創建一個表行，並且該行應與表標題對齊。 在我編寫的代碼中，使用正確的信息生成了行，但是行的對齊存在錯誤。

https://jsfiddle.net/aLnbntmg/

 var arrayProduto = []; var arrayQuantidade = []; function addItem() { var produtoAdicionado = form_vender.seleciona_Produto.value; var quantidadeAdionada = parseInt(form_vender.quantidadeVenda.value); var achou = false; for (i = 0; i < arrayProduto.length; i++) { if (arrayProduto[i] == produtoAdicionado) { achou = true; arrayQuantidade[i] += quantidadeAdionada; } } if (achou == false) { arrayProduto.push(produtoAdicionado); arrayQuantidade.push(quantidadeAdionada); } form_vender.quantidadeVenda.value = ''; $('#tabelavenda').append('<tr class="child"><td>' + produtoAdicionado + '</td><td>' + quantidadeAdionada + '</td></tr>'); } 

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: center; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } .tabela { position: relative; width: 40%; height: auto; bottom: 10%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="form_vender"> <h1> Vender</h1> <select id="seleciona_Produto"> <option value="Uno">Uno</option> <option value="Duo">Duo</option> <option value="Trilogia">Trilogia</option> <option value="Cerveja">Cerveja</option> <option value="Refrigerante">Refrigerante</option> <option value="Fritas">Fritas</option> <option value="Água">Água</option> </select> <input type="text" size="3" placeholder="Qtde" id="quantidadeVenda"> <br /> <br /> </form> <input type="submit" onclick="addItem()" value="Adicionar item"> <input type="submit" onclick="FinalizaVenda()" value="Finalizar Venda"> <br /> <br /> <br /> <div id="tabelavenda" class="tabela"> <table> <thead> <tr> <th>Identificação</th> <th>Porte</th> </tr> </thead> </table> </div> 

Answer 1

您不是要附加到表，而是要附加到表的包裝器 -使用此命令：

$('#tabelavenda table').append('<tr class="child"><td>' + produtoAdicionado + '</td><td>' + quantidadeAdionada + '</td></tr>');

Updated fiddle

  var arrayProduto = []; var arrayQuantidade = []; function addItem() { var produtoAdicionado = form_vender.seleciona_Produto.value; var quantidadeAdionada = parseInt(form_vender.quantidadeVenda.value); var achou = false; for (i = 0; i < arrayProduto.length; i++) { if (arrayProduto[i] == produtoAdicionado) { achou = true; arrayQuantidade[i] += quantidadeAdionada; } } if (achou == false) { arrayProduto.push(produtoAdicionado); arrayQuantidade.push(quantidadeAdionada); } form_vender.quantidadeVenda.value = ''; $('#tabelavenda table').append('<tr class="child"><td>' + produtoAdicionado + '</td><td>' + quantidadeAdionada + '</td></tr>'); } 

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: center; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } .tabela { position: relative; width: 40%; height: auto; bottom: 10%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="form_vender"> <h1> Vender</h1> <select id="seleciona_Produto"> <option value="Uno">Uno</option> <option value="Duo">Duo</option> <option value="Trilogia">Trilogia</option> <option value="Cerveja">Cerveja</option> <option value="Refrigerante">Refrigerante</option> <option value="Fritas">Fritas</option> <option value="Água">Água</option> </select> <input type="text" size="3" placeholder="Qtde" id="quantidadeVenda"> <br /> <br /> </form> <input type="submit" onclick="addItem()" value="Adicionar item"> <input type="submit" onclick="FinalizaVenda()" value="Finalizar Venda"> <br /> <br /> <br /> <div id="tabelavenda" class="tabela"> <table> <thead> <tr> <th>Identificação</th> <th>Porte</th> </tr> </thead> </table> </div> 

Answer 2

更改id =“ tabelavenda”進行標記，如下所示：

<table id="tabelavenda">

並從中刪除或更改名稱

<div id="other_name">