HTML Table

HTML

<select name="frutas" id="frutas">
    <option value="0">Escolha uma fruta</option>
    <option value="lima">Lima</option>
    <option value="banana">Banana</option>
    <option value="laranja">Laranja</option>
    <option value="manga">Manga</option>
    <option value="limao">Limão</option>
</select>
<button id="adicionarFruta">adicionar</button>
<table id="carrinhoCompras">
    <tr>
        <th>Produto</th>
        <th>Qtd</th>
        <th></th>
    </tr>
</table>

CSS

#carrinhoCompras {
    margin-top:20px;
}
#carrinhoCompras th, #carrinhoCompras td {
    padding:0.8em;
    border: 1px solid;
}
#carrinhoCompras th {
    background-color:#6699FF;
    font-weight:bold;
}
#carrinhoCompras input {
    width: 30px;
}

JavaScript

$('#adicionarFruta').on('click', function () {
    var $fruta = $('#frutas option:selected');

    // ignorar se fôr a primeira opção do select
    if ($fruta.val() == '0') return false;

    // verificar se o produto já está na tabela
    if ($('#carrinhoCompras input[name^=' + $fruta.val() + ']').length) return false;

    var novaLinha = '\
    <tr> \
    <td>' + $fruta.text() + '</td> \
    <td><input name="' + $fruta.val() + '" value="1" /></td> \
    <td><button>-</button></td> \
    </tr> ';
    $('#carrinhoCompras ').append($(novaLinha));
});
$('#carrinhoCompras').on('click', 'button', function () {
    $(this).closest('tr').remove();
});