Tabela com filtro automatico e soma - Javascript

Bruno Manjagalli · 1 de agosto de 2014

Boa tarde, estou tentando aprender javascript e achei um tutorial na internet onde se cria um filtro dinâmico para a tabela e vai mostrando somente os resultados desejados.
Porém, gostaria que fosse realizado a soma de uma dessas colunas e fosse mostrado um total (ja com o filtro) no fim da tabela. Isso é possível? Como posso pegar somente o valor da coluna e fazer uma somatória?
Seguem os códigos do tutorial:

<html>    <meta charset="UTF-8"/>    <link rel="stylesheet" type="text/css" href="estilo.css"/>    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>    <script type="text/javascript" src="script.js"></script>   <head></head><body>    <div id="divConteudo">        <table id="tabela">            <thead>                <tr>                    <th>Código</th>                    <th>Descrição</th>                    <th>Preco</th>                </tr>                <tr>                    <th><input type="text" id="txtColuna1"/></th>                    <th><input type="text" id="txtColuna2"/></th>                    <th><input type="text" id="txtColuna3"/></th>                </tr>                        </thead>            <tbody>                <tr>                    <td>001.01-A</td>                    <td>Feijão preto</td>                    <td>5.89</td>                </tr>                <tr>                    <td>001.02-B</td>                    <td>Feijão branco</td>                    <td>5.00</td>                </tr>                            <tr>                    <td>002.10-C</td>                    <td>Arroz parboilizado</td>                    <td>10.0</td>                </tr>                <tr>                    <td>003.12-D</td>                    <td>Iogurte de morango</td>                    <td>2.30</td>                </tr>                <tr>                    <td>041.27-E</td>                    <td>Sabão em pó</td>                    <td>6.20</td>                </tr>                        </tbody>        </table>    </div></body></html>

body{    font-family:Verdana;}#tabela{    width:100%;    border:solid 1px;    text-align:left;    border-collapse:collapse;}#tabela tbody tr{    border:solid 1px;    height:30px;    cursor:pointer;}#tabela thead{    background:beige;}#tabela thead th:nth-child(1){    width:100px;}#tabela input{    color:navy;    width:100%;}

$(function(){    $("#tabela input").keyup(function(){               var index = $(this).parent().index();        var nth = "#tabela td:nth-child("+(index+1).toString()+")";        var valor = $(this).val().toUpperCase();        $("#tabela tbody tr").show();        $(nth).each(function(){            if($(this).text().toUpperCase().indexOf(valor) < 0){                $(this).parent().hide();            }        });    });    $("#tabela input").blur(function(){        $(this).val("");    });});

esculpem o tanto de códigos. Desde já, obrigado.