javascript - 追加错误动态表

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>