附加错误动态表

Question

我遇到了我已经开发的动态桌子的问题，这个问题很美观。每次用户单击＆＃34;添加产品＆＃34;时，代码应创建一个表行，该行应与表头对齐。在我创建的代码中，使用正确的信息生成行，但行的对齐方式存在错误。

https://jsfiddle.net/aLnbntmg/

＆＃13;

＆＃13;

foo = ->(x = x) { puts x; x = 2; puts x }
#⇒    # nil ?! WHY?
#  2

＆＃13;

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>');


}

＆＃13;

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%;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

您没有附加到表，而是附加到表的包装 - 请使用：

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

Updated fiddle

＆＃13;

＆＃13;

  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>');


  }

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

更改ID =＆＃34; tabelavenda＆＃34;像这样标记：

<table id="tabelavenda">

并从中删除或更改名称

<div id="other_name">