Table mounted by input select

Question

My problem here is that I mount a table through an array received by Ajax,have 2 problems:

first Every time I select an item in select the Table should reset and take the new data, the way I did it not adding without deleting

2º I have a text field where a number will be typed and has to be multiplied in all with the qtd_planned id. It will be of great help to lost in this.

<label for="qtd_planejada" class="col-md-2 control-label">Quantidade planejada:</label>
<div class="col-md-2">
    <form:input path='qtd_planejada' type='text' class="form-control" />
</div>
<form:errors path='qtd_planejada' />

<table id="estruturaTabela" class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th> Item </th>
            <th> Descrição </th>
            <th> Quantidade Base </th>
            <th> Quantidade Planejada </th>
            <th> Disponivel </th>
            <th> Nome da UM </th>
            <th> Depósito </th>
        </tr>
    </thead>
    <tbody id="body">
    </tbody>
</table>

<script>
    $('select[id=produto]').change(function() {
        var itemCode = $(this).val();
        var tbody;
        var tr;
        var tr = document.createElement('TR');
        $.ajax({
            type: "GET",
            url: '/producao/estruturaProduto/' + itemCode,
            success: function(retorno) {
                console.log(retorno);
                if (retorno.length > 0) {
                    //TABLE ROWS
                    tbody = $('#body');
                    for (var i = 0; i < retorno.length; i++) {
                        tr = $('<tr/>').appendTo(tbody);
                        tr.append('<td id="itemcode">' + retorno[i].itemcode + '</td>');
                        tr.append('<td id="itemname">' + retorno[i].itemname + '</td>');
                        tr.append('<td id="qtd_base">' + retorno[i].qtd_base + '</td>');
                        tr.append('<td id="planejada">' + retorno[i].qtd_base + '</td>');
                        tr.append('<td id="disponivel">' + retorno[i].disponivel + '</td>');
                        tr.append('<td id="nomeUM">' + retorno[i].nomeum + '</td>');
                        tr.append('<td id="deposito">' + retorno[i].deposito + '</td>');
                    }
                }
            }
        })
    });
</script>

Answer 1

Hello, to clear put this code:

$('select[id=produto]').change(function () {
   $('#estruturaTabela tbody').html('') // assim ele limpa o conteúdo da tbody
......
......
});