表中列的值求和

提问者：小点点

我用应用程序脚本创建了一个网站。

在这个网站中，我有一个有4列的表格（项目，价格，数量和总数）一旦你输入数量的项目，第4列将自动计算总数。

我需要的是列4中所有值的和。将显示为表下方的“总计”。

我怎么能做到呢？谢谢。

这是我的代码:

null

calc_total();

$(".qty").on('change', function(){
  var parent = $(this).closest('tr');
  var price  = parseFloat($('.rate',parent).text());
  var choose = parseFloat($('.qty',parent).val());

  $('.total',parent).text(choose*price);

  calc_total();
});

function calc_total(){
  var sum = 0;
  $(".total").each(function(){
    sum += parseFloat($(this).text());
  });
  $('#sum').text(sum);
}


const myTable = document.querySelector('#myTableID')

myTable.oninput = e =>
{
  let rowIndex = e.target.parentNode.parentNode.rowIndex
    , Qte      = getInput_N_RowCell(rowIndex,0)
    , Rate     = getInput_N_RowCell(rowIndex,1)

  setInput_RowCell(rowIndex,2, (Qte * Rate) )

  console.log('sum=',  Sum_RowInputValues(rowIndex) )
}

function getInput_N_RowCell(xRow, xCell) {
  return Number(myTable.rows[xRow].cells[xCell].querySelector('input').value) || 0
}

function setInput_RowCell(xRow, xCell, value) {
  myTable.rows[xRow].cells[xCell].querySelector('input').value = value
}



// for a sum off all row values : (not used here)  
function Sum_RowInputValues(xRow) {
  let Sum = 0
  for (c=0;c<myTable.rows[xRow].cells.length;c++ ) {
    try {
      Sum += Number(myTable.rows[xRow].cells[c].querySelector('input').value) || 0
    } catch(e) {/* nothing */ }
  }
  return Sum
}

function myFunction() {
var val = Math.floor(1000 + Math.random() * 9000);
  document.getElementById("demo").innerHTML =  "Order # " + val;
  
  
}

h1{
  background: -webkit-linear-gradient(#FFC0CB, #FF1493);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
h3{
  text-transform: uppercase; 

  background: -webkit-linear-gradient(#FFC0CB, #FF1493);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
* {
  box-sizing: border-box;
}

.column {
  margin-left:5%;
  float: left;
  width: 20%;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

h4{
 margin-left: 2%;
 color: #008B8B;
 font-weight: 900;
 text-transform: uppercase;
 
}
h5{
 color: red;
 text-transform: uppercase;
 font-weight: 900;
}

h1{
 color: #FFC0CB;
 text-transform: uppercase;
 font-weight: 900;
}

.button {
  background-color: #FF69B4; /* Green */
  border: none;
  color: white;
  padding: 8px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  margin: 4px 2px;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px #999;
}
.button1:hover {background-color: #FFC0CB}

.button:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


.button1 {
  margin-left: 3%;
  border-radius: 12px;
  background-color: white; 
  color: black; 
  border: 2px solid #FF69B4;
}

th {
  text-align: center;
}

td {
  text-align: right;
}

th, td {
  border-bottom: 1px solid #ddd;
}

tr:hover {background-color: #f5f5f5;}

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  
  <body>
  

<h1 style="margin-left:6%;">THE MILK TEA CLUB</h1> <br>

<table id='myTableID0'style="display: inline-block; float: left; font-size: 18px; padding-left: 19px;">
  <thead>
    <tr>
      <th>Item</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: #fff0f8;">
      <td>Classic</td>
    </tr>
    <tr style="background-color: #fff0f8;">
      <td>Wintermelon</td>
    </tr>
    <tr style="background-color: #fff0f8;">
      <td>Chocolate</td>
    </tr>
    <tr style="background-color: #f2f2f2;">
      <td>Classic with Pearl</td>
    </tr>
    <tr style="background-color: #f2f2f2;">
      <td>Wintermelon with Pearl</td>
    </tr>
    <tr style="background-color: #f2f2f2;">
      <td>Chocolate with Pearl</td>
    </tr>
    <tr style="background-color: #fff0f8;">
      <td>Classic with Crystal</td>
    </tr>
    <tr style="background-color: #fff0f8;">
      <td>Wintermelon with Crystal</td>
    </tr>
    <tr style="background-color: #fff0f8;">
      <td>Chocolate with Crystal</td>
    </tr>
    
  </tbody>
</table>

<table id='myTableID'style="display: inline-block; font-size: 15px; padding-left: 5px;">

  <thead>
    <tr>
      <th style='font-size: 18px;'>Rate</th>
      <th style='font-size: 18px;'>Quantity</th>
      <th style='font-size: 18px;'>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: #fff0f8;">
      <td><input id="rate" value='75' size='5' style='text-align:center; font-size: 14px;' disabled></td>
      <td><input id="qty" type='text' size='5' style='text-align:center; font-size: 14px;'></td>
      <td><input id='totals' type='text' size='5' style='text-align:center; font-size: 14px;' readonly disabled></td>
    </tr>
    <tr style="background-color: #fff0f8;">
      <td><input id="rate" value='75' size='5' style='text-align:center; font-size: 14px;' disabled></td>
      <td><input id="qty" type='text' size='5' style='text-align:center; font-size: 14px;'></td>
      <td><input id='totals' type='text' size='5' style='text-align:center; font-size: 14px;' readonly disabled></td>
    </tr>
    <tr style="background-color: #fff0f8;">
      <td><input id="rate" value='75' size='5' style='text-align:center; font-size: 14px;' disabled></td>
      <td><input id="qty" type='text' size='5' style='text-align:center; font-size: 14px;'></td>
      <td><input id='totals' type='text' size='5' style='text-align:center; font-size: 14px;' readonly disabled></td>
    </tr>
    
    <tr style="background-color: #f2f2f2;">
      <td><input id="rate" value='85' size='5' style='text-align:center; font-size: 14px;' disabled></td>
      <td><input id="qty" type='text' size='5' style='text-align:center; font-size: 14px;'></td>
      <td><input id='totals' type='text' size='5' style='text-align:center; font-size: 14px;' readonly disabled></td>
    </tr>
    <tr style="background-color: #f2f2f2;">
      <td><input id="rate" value='85' size='5' style='text-align:center; font-size: 14px;' disabled></td>
      <td><input id="qty" type='text' size='5' style='text-align:center; font-size: 14px;'></td>
      <td><input id='totals' type='text' size='5' style='text-align:center; font-size: 14px;' readonly disabled></td>
    </tr>
    <tr style="background-color: #f2f2f2;">
      <td><input id="rate" value='85' size='5' style='text-align:center; font-size: 14px;' disabled></td>
      <td><input id="qty" type='text' size='5' style='text-align:center; font-size: 14px;'></td>
      <td><input id='totals' type='text' size='5' style='text-align:center; font-size: 14px;' readonly disabled></td>
    </tr>
     
    <tr style="background-color: #fff0f8;">
      <td><input id="rate" value='85' size='5' style='text-align:center; font-size: 14px;' disabled></td>
      <td><input id="qty" type='text' size='5' style='text-align:center; font-size: 14px;'></td>
      <td><input id='totals' type='text' size='5' style='text-align:center; font-size: 14px;' readonly disabled></td>
    </tr>
    <tr style="background-color: #fff0f8;">
      <td><input id="rate"value='85' size='5' style='text-align:center; font-size: 14px;' disabled></td>
      <td><input id="qty" type='text' size='5' style='text-align:center; font-size: 14px;'></td>
      <td><input id='totals' type='text' size='5' style='text-align:center; font-size: 14px;' readonly disabled></td>
    </tr>
    <tr style="background-color: #fff0f8;">
      <td><input id="rate" value='85' size='5' style='text-align:center; font-size: 14px;' disabled></td>
      <td><input id="qty" type='text' size='5' style='text-align:center; font-size: 14px;'></td>
      <td><input id='totals' type='text' size='5' style='text-align:center; font-size: 14px;' readonly disabled></td>
    </tr>
    
  <tr>
    <th colspan="2" style="text-align:right">Total:</th>
    <th colspan="2" style="text-align:center"><span id="sum"></span></th>
  </tr>
  
  </tbody>
</table><br>

<div class="row">

  <div class="column">
    <h3><b>Order Logs</b></h3>
    <button class="button button1" onclick="myFunction()"> Get Order </button><button class="button button1" onlick="sumAll()"> Record Order </button>
    <h2 id="demo"></h2><!-- ORDER NUMBER -->
 </div> 
  
</div>

</body>
</html>

null

共1个答案

匿名用户

始终避免将同一id分配给多个元素。您可以为每个总计输入分配一个占位符类。对于。

<input id='totals' class='total' type='text' size='5' style='text-align:center; font-size: 14px;' readonly disabled>

然后，您可以使用jQuery类选择器和sumAll（）函数中的每个函数，用类total循环这些输入。

function sumAll(){
    var total = 0;
        jQuery.each( $('.total'), function( index, textFeild) {
          total  = total+  $(textFeild).value();
        });
    //Assign the total value to the required element.
}

表中列的值求和

共1个答案

相关问题

热门标签

表中列的值求和

共1个答案

相关问题

热门标签

微信关注