HTML Table cell - Recovering Values

Question

I have a html table with a dynamic rows list, When I delete one of these rows I want to recover the value of the column 3 on the selected row to change an output text with the total value...

How do I do it with jquery or javascript ?

<div id="ven_mid">
    <table id="tbprodutos" style="width:80%;margin:0 auto;float:left;text-align:center;">
        <tr class="titulo">
            <th>Referência</th>
            <th>Numeração</th>
            <th>Qtd</th>
            <th>Valor - R$</th>
            <th>Código</th>
            <th>-</th>
        </tr>
    </table>
</div>
<script>
    function deleteRow(i){
        // here i need to remove the value "valor"
        // of the selected row of the total.
        document.getElementById('tbprodutos').deleteRow(i);    
    }
</script>

--- Add Row Script ---

<script>    
            $('#ven_prod').keypress(function (e)
                    {
                        if(e.keyCode==13)
                        {
                            var table = document.getElementById('tbprodutos');
                             var tblBody = table.tBodies[0];  
                             var newRow = tblBody.insertRow(-1);
                             var prod = document.getElementById('ven_prod').value;
                             var qtd = document.getElementById('ven_qtd');
                             var barra = prod.substring(0, 12);
                             var num = prod.substring(14, 16);
                             var ref = "";
                             var valor = "";
                             var id = "";
                             var cor = "";
                             var mat = "";
                             var tot = document.getElementById('valortotal').value;

                             $.ajax({
                                    type: "POST",
                                    url: "System/ProcessaProdutos.jsp",
                                    data: "pro_barras="+barra,
                                    success: function(data){
                                        var retorno = data.split(" ");

                                        ref = (retorno[0]);
                                        valor = (retorno[1]);
                                        id = (retorno[2]);
                                        mat = (retorno[3]);
                                        cor = (retorno[4]);

                                        if(prod.length==16) { 
                                               var newCell0 = newRow.insertCell(0);  
                                               newCell0.innerHTML = '<td>Ref: '+ref+' - '+mat+' '+cor+'</td>';

                                               var newCell1 = newRow.insertCell(1);  
                                               newCell1.innerHTML = '<td>'+num+'</td>';  

                                               var newCell2 = newRow.insertCell(2);  
                                               newCell2.innerHTML = '<td>'+qtd.value+'</td>';

                                               var newCell3 = newRow.insertCell(3);
                                               newCell3.innerHTML = '<td class="tbvalor">'+valor+'</td>';

                                               var newCell4 = newRow.insertCell(4);  
                                               newCell4.innerHTML = '<td>'+barra+'</td>';

                                               var newCell5 = newRow.insertCell(5);  
                                               newCell5.innerHTML = '<td><input type="button" value="Remover" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"/></td>';

                                                document.getElementById('ref').value = 'Referência: '+ref+' - '+mat+' '+cor;
                                                document.getElementById('imgsrc').src = './?acao=Img&pro_id='+id;
                                                updateTotal();

                                                document.getElementById('ven_prod').value = '';
                                                document.getElementById('ven_qtd').value = '1';

                                            } else {

                                                document.getElementById('ven_prod').value = '';
                                                document.getElementById('ven_qtd').value = '1';
                                                alert("Código de barras inválido!");
                                            }

                                    }
                                });



                            return false;
                        }
            });

        </script>

--- New "update total" function that solved the problem --

function updateTotal(){
              var total = 0;
              var rows = $("#tbprodutos tr:gt(0)");
                rows.children("td:nth-child(4)").each(function() {
                total += parseInt($(this).text()); 
              });
                document.getElementById('valortotal').value = total;
        }

Answer 1

To expand on what Bartdude said, here is a more usable example. Lets say you have a table with the structure

<table id = 'tableData'>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
    <th>Column 5</th>
  </tr>

  <tr>
    <td class = 'col1'>1.1</td>
    <td class = 'col2'>1.2</td>
    <td class = 'col3'>1.3</td>
    <td class = 'col4'>1.4</td>
    <td class = 'col5'>1.5</td>
  </tr>
</table>

Each time a delete operation occurs, you can just grab all the existing values and execute a sum or what mathematical operation you use and return the value

function updateTotal(){
  var total = 0;

  //loop over all table rows
  $("#tableData").find("tr").each(function(){

    //get all column 3 values and sum them for a total
    total += $(this).find("td.col3").text();
  }

  return total;

}