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;

}

HTML表格单元格 - 恢复值

1 个答案: