HTML表格單元格 - 恢復值

Question

我有一個帶有動態行列表的html表格，當我刪除這些行中的一個時，我想恢復所選行上第3列的值以用總值更改輸出文本...

如何用jquery或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> 

---添加行腳本---

<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> 

是解決了這個問題

---新的 「更新總」 功能 -

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

要展開什麼Bartdude說，這裏是一個更有用的例子。比方說你有一個表結構

<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> 

每次發生刪除操作時，你可以抓住所有的現有值，並執行您使用金額或什麼數學運算和返回值

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; 

}