文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在删除/添加新行时从表列中求和值并进行更新

问如何在删除/添加新行时从表列中求和值并进行更新
EN

Stack Overflow用户

提问于 2017-01-15 00:30:51

回答 5查看 12K关注 0票数 0

我试图求和某一列的值，但老实说，我不知道该如何做，而且当我添加或删除某一行时，我还想刷新该值，我能做些什么呢？我在这里尝试使用类似问题的分析器，但是它们从所有列的值之和，我只想对特定的列这样做！以下是我所拥有的：

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

$('#xd').click(function() {
  var lines = "";

  lines += '<td>3</td>';
  lines += '<td>3</td>';
  lines += '<td>15</td>';
  lines += '<td>Credit</td>';
  lines += '<td>1</td>';
  lines += '<td>100.00</td>';
  lines += '<td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>';

  $('#TableBody').append(lines);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="Table">
  <thead>
    <tr>
      <td>ID</td>
      <td>Code</td>
      <td>Client</td>
      <td>Debit/Credit</td>
      <td>Quantity</td>
      <td>Price</td>
      <td>Options</td>
    </tr>
  </thead>
  <tbody id="TableBody">
    <tr>
      <td>1</td>
      <td>1</td>
      <td>3</td>
      <td>Debit</td>
      <td>10</td>
      <td>12.00</td>
      <td>
        <input type="button" value="Delete" onclick="deleteRow(this)" />
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>12</td>
      <td>Debit</td>
      <td>5</td>
      <td>10.00</td>
      <td>
        <input type="button" value="Delete" onclick="deleteRow(this)" />
      </td>
    </tr>
  </tbody>
  <tfoot id="TableFooter">
    <tr>
      <td colspan="4">Total</td>
      <td>15</td>
      <td>170.00</td>
    </tr>
  </tfoot>
</table>

<input type="button" id="xd" value="add row">

在上面的代码中，我手动添加了“总计”列(价格、数量)，当用户添加/删除一行时，我希望更新总结果。

javascript

jquery

回答 5

Stack Overflow用户

回答已采纳

发布于 2017-01-15 01:28:40

你失踪了：

添加新行时，标记。另外，只需添加一个将"Quantities"和“Price”相加的类。这是一个可行的解决方案。希望能帮上忙！

   function deleteRow(btn) {
        var row = btn.parentNode.parentNode;
        row.parentNode.removeChild(row);
        sumOfColumns();
    }

    function sumOfColumns(){

        var totalQuantity = 0;
        var totalPrice = 0;
        $(".someClass").each(function(){
            totalQuantity += parseInt($(this).html());
            $(".someTotalClass").html(totalQuantity);
        });

        $(".classPrice").each(function(){
            totalPrice += parseInt($(this).html());
            $(".someTotalPrice").html(totalPrice);
        });
    }

    $(document).ready(function () {
        
        $('#xd').click(function() {
            var lines = "";

            lines += '<tr>';
            lines += '<td>3</td>';
            lines += '<td>3</td>';
            lines += '<td>15</td>';
            lines += '<td>Credit</td>';
            lines += '<td class = "someClass">1</td>';
            lines += '<td class = "classPrice">100.00</td>';
            lines += '<td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>';
            lines += '</tr>';

            $('#TableBody').append(lines);
            sumOfColumns();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Table">
    <thead>
    <tr>
        <td>ID</td>
        <td>Code</td>
        <td>Client</td>
        <td>Debit/Credit</td>
        <td>Quantity</td>
        <td>Price</td>
        <td>Options</td>
    </tr>
    </thead>
    <tbody id="TableBody">
    <tr>
        <td>1</td>
        <td>1</td>
        <td>3</td>
        <td>Debit</td>
        <td class = "someClass">10</td>
        <td class = "classPrice">12.00</td>
        <td>
            <input type="button" value="Delete" onclick="deleteRow(this)" />
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>12</td>
        <td>Debit</td>
        <td class = "someClass">5</td>
        <td class = "classPrice">10.00</td>
        <td>
            <input type="button" value="Delete" onclick="deleteRow(this)" />
        </td>
    </tr>
    </tbody>
    <tfoot id="TableFooter">
    <tr>
        <td colspan="4">Total</td>
        <td class = "someTotalClass">15</td>
        <td class = "someTotalPrice"">170.00</td>
    </tr>
    </tfoot>
</table>

<input type="button" id="xd" value="add row">

票数 1

Stack Overflow用户

发布于 2017-01-15 01:06:11

您的方法对于长期使用来说有点脆弱，但作为概念的证明，这可能会有所帮助。

总结一个数字数组的关键技术是使用Array.reduce，它的工作方式如下：

var array = [1, 2, 6, 1, 5];
var total = array.reduce(function(total, number) {
  return total + number;
}, 0);

document.write('<h1>Total: <code>' + total + '</code></h1>');

给定一个数字数组，对每个数字进行迭代，并将number添加到total，total从0开始。Array.reduce有两个参数:对每个项执行一个函数和一个起始值。迭代器函数将接收两个参数，在您的例子中，正在运行的总计和下一个数字。

有关更多细节，请参见Array.reduce。

一些小贴士

只要有可能，就把事情分解成更小的函数。
限制全局变量的使用，但当您确实需要它们时，要保持干净和一致。
限制在DOM上存储数据(我稍微违反了这一点，但这只是草图代码)
尝试以一种可重用的方式编写代码

这种方法的好处在于它使添加新特性/更改您构建的内容变得更加容易。例如，如果我们编写了一个泛型函数getColumnTotal(selector)，它允许您为列的单元格(例如：.priceCell)指定一个jQuery选择器，那么您可以对其他列(如quantity )重用该函数。

我假设您正在创建一个总体单元格，该单元格显示所有单个订单/行的总数。要做到这一点，我们所需要做的就是计算每一行的subtotal，为此添加一个新的列，然后再使用getColumnTotal函数来总结所有的小计。瞧，总计。

请注意，我的代码不考虑错误，因此您可能需要处理输入无效quantity或price数据的情况。

var $tableBody = $('#TableBody');
var $totalQuantityCell = $('#totalQuantityCell');
var $totalPriceCell = $('#totalPriceCell');
var $totalGrandCell = $('#grandTotalCell');

// Add a row with random values on "Add Row" button click
$('#xd').click(addRandomRow);

function addRandomRow(event) {
  var randomCode = Math.round(Math.random() * 4);
  var randomClient = Math.round(Math.random() * 15);
  var randomCharge = ( Math.round(Math.random()) ? 'Debit' : 'Credit' );
  var randomQuantity = Math.ceil(Math.random() * 5);
  var randomPrice = Math.ceil(Math.random() * 100).toFixed(2);
  
  addRow(randomCode, randomClient, randomCharge, randomQuantity, randomPrice);
};

// Add some rows to start
addRandomRow();
addRandomRow();

// Listen for clicks on ".deleteRowButton" within the table
$tableBody.on('click', '.deleteRowButton', function(event) {
  deleteRow( $(event.target).data('row') );
  updateTotals();
});

// --------------------------

function addRow(code, client, chargeType, quantity, price) {
  // Create a new row element
  var idNum = ( $tableBody.find('tr').length + 1 );
  var rowId = 'row-' + idNum;
  var $row = $('<tr id="' + rowId + '"></tr>');

  // Add the table cells
  $row.append('<td class="idCell">' + idNum + '</td>');
  $row.append('<td class="codeCell">' + code + '</td>');
  $row.append('<td class="clientCell">' + client + '</td>');
  $row.append('<td class="chargeTypeCell">' + chargeType + '</td>');
  $row.append('<td class="quantityCell">' + quantity + '</td>');
  $row.append('<td class="priceCell">' + price + '</td>');
  $row.append('<td class="orderTotalCell">' + getSubtotal(quantity, price) + '</td>');
  $row.append('<td><input type="button" value="Delete" class="deleteRowButton" data-row="#' + rowId + '" /></td>');

  // Append the row to the table body
  $tableBody.append($row);
  updateTotals();
}

function deleteRow(rowId) {
  $(rowId).remove();
}

function updateTotals() {
  var totalQuantity = getColumnTotal('.quantityCell');
  var totalPrice = getColumnTotal('.priceCell');
  var totalOrder = getColumnTotal('.orderTotalCell');
  
  $totalQuantityCell.text( totalQuantity );
  $totalPriceCell.text( toMoney(totalPrice) );
  $totalGrandCell.text( toMoney(totalOrder) );
}

/**
 A standard function to calaculate the subtotal of a row, this is
 where you could apply tax or other data transformations if need be.
*/
function getSubtotal(quantity, price) {
  return (quantity * price).toFixed(2);
}

/**
Takes a jQuery selector, finds all matching elements for it, and totals up their contents.
It works by converting the elements list to an Array and then using Array.reduce.
@see https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
*/
function getColumnTotal(selector) {
  return Array.from( $(selector) ).reduce(sumReducer, 0);
}

/**
The reducer function that adds up a running total. This function parses the innerHTML content
of an element and converts it to a number so math works on it.
*/
function sumReducer(total, cell) {
  return total += parseInt(cell.innerHTML, 10);
}

function toMoney(number) {
  return '$' + number.toFixed(2);
}

#TableHead td {
  border-bottom: 1px #000 solid;
}

.orderTotalCell,
#grandTotalCell,
#totalPriceCell {
  text-align: right;
 }

#TableFooter tr:first-child td {
  border-top: 1px #000 solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="Table">
  <thead id="TableHead">
    <tr>
      <td>ID</td>
      <td>Code</td>
      <td>Client</td>
      <td>Debit/Credit</td>
      <td>Quantity</td>
      <td>Price</td>
      <td>Order Total</td>
      <td>Options</td>
    </tr>
  </thead>
  <tbody id="TableBody">
  </tbody>
  <tfoot id="TableFooter">
    <tr>
      <td colspan="4">Sub-Total</td>
      <td id="totalQuantityCell">&ndash;</td>
      <td id="totalPriceCell">&ndash;</td>
      <td id="grandTotalCell">&ndash;</td>
    </tr>
  </tfoot>
</table>

<input type="button" id="xd" value="add row">

票数 2

Stack Overflow用户

发布于 2017-01-15 03:27:07

哇，答案很多，但这里有一种更面向对象的方法。

function row(Id, Code, Client, DebitCredit, Quantity, Price) {
  this.Id = Id;
  this.Code = Code;
  this.Client = Client;
  this.DebitCredit = DebitCredit;
  this.Quantity = Quantity;
  this.Price = Price;
}

function model() {
  this.rows = [];
}

var mymodel = new model();

$(document).ready(function() {
  mymodel.rows.push(new row(1, 1, 3, 'Debit', 10, 12))
  mymodel.rows.push(new row(2, 2, 12, 'Debit', 5, 10))
  draw();

  $("body").on("click", ".delete", function() {
    var id = $(this).data('id');
    for (i = 0; i < mymodel.rows.length; i++) {
      console.log(mymodel.rows[i].Id);
      if (mymodel.rows[i].Id == id) {
        mymodel.rows.splice(i, 1);
      }
    }
    draw();
  });

  $('#add').click(function() {
    mymodel.rows.push(new row(
      $('#Id').val(),
      $('#Code').val(),
      $('#Client').val(),
      'Debit',
      Number($('#Quantity').val()),
      Number($('#Price').val())
    ))
    draw();
  });
})

function draw() {
  $('tbody').empty();
  var totalQuantity = 0;
  var totalPrice = 0;
  $.each(mymodel.rows, function(i, row) {
    totalQuantity += row.Quantity;
    totalPrice += row.Price;
    var myrow = '<tr>'
    $.each(row, function(key, value) {
      myrow += '<td>' + value + '</td>'
    });
    myrow += '<td><input type="button" class="btn btn-danger delete" data-id="' + row.Id + '" value="X"/></td>'
    myrow += '<tr>'
    $('tbody').append(myrow);
  });
  $('#totalQuantity').text(totalQuantity)
  $('#totalPrice').text(totalPrice)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<table class="table table-condensed">
  <thead>
    <tr>
      <td>ID</td>
      <td>Code</td>
      <td>Client</td>
      <td>Debit/Credit</td>
      <td>Quantity</td>
      <td>Price</td>
      <td>Delete</td>
    </tr>
  </thead>
  <tbody>

  </tbody>
  <tfoot>
    <tr>
      <td colspan=7>Total Quantity:
        <span id="totalQuantity"></span> Total Price:
        <span id="totalPrice"></span>
      </td>

    </tr>
  </tfoot>
</table>

<form class="form-inline">
  <div class="form-group">
    <label for="id">Id:</label>
    <input type="number" class="form-control" id="Id">
  </div>
  <div class="form-group">
    <label for="Code">Code:</label>
    <input type="number" class="form-control" id="Code">
  </div>
  <div class="form-group">
    <label for="Client">Client:</label>
    <input type="number" class="form-control" id="Client">
  </div>
  <div class="form-group">
    <label for="Quantity">Quantity:</label>
    <input type="number" class="form-control" id="Quantity">
  </div>
  <div class="form-group">
    <label for="Price">Price:</label>
    <input type="number" class="form-control" id="Price">
  </div>
  <input type="button" class="btn btn-info" value="add" id="add" />
</form>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41656542

复制

相似问题

问如何在删除/添加新行时从表列中求和值并进行更新
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在删除/添加新行时从表列中求和值并进行更新EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在删除/添加新行时从表列中求和值并进行更新
EN