Ячейка таблицы HTML - восстановление значений

0

У меня есть таблица 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>

--- Новая функция "update total", которая решила проблему -

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;
        }
  • 2
    Вы просто не должны так поступать. Если вы рассчитываете сумму на основе 3-го столбца, просто пересчитывайте сумму каждый раз, когда вы что-то меняете (добавление / удаление строки, обновление количества, ...)
Теги:

1 ответ

0

Чтобы расширить то, что сказал Бартдуде, вот более удобный пример. Допустим, у вас есть таблица со структурой

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

}
  • 0
    Я просто добавляю код function updateTotal() { var total = 0; $("#tbprodutos").find("tr").each(function(){ total += $(this).find("td.tbvalor").text(); }); return total; alert(total); } но когда я звоню, ничего не происходит
  • 0
    Попробуйте переключить линии оповещения и возврата. Помните, что return должна быть последней строкой функции, весь код, следующий за ней в области видимости, является мертвым кодом.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню