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; 

}