html 中列的总和值

Question

您好，我需要显示一列值的总和，但我在单击按钮后动态添加行。例如，我检查第一个 table 中的行，单击按钮，该行转到第二个 table 并且从第二个 table 我需要对一列求和。这就是我的 table 的样子，我需要对 'StandardPrice' 求和并将其发送到 <p></p>。首先使用数据库中的数据：

<?php
   echo "<table width=\"50%\" id=\"first\">";
   $link = mysqli_connect("localhost", "root", "", "db_hotel")
           or die("Could not connect");
   $query  = "SELECT ID_Room, Capacity, StandardPrice FROM Rooms"; 
   $result = mysqli_query($link, $query)
           or die("Query failed");

   while ($row = mysqli_fetch_array($result)) {
   echo "<TR class=\"\" id=pokoj".$row["ID_Room"]." name=pokoj".$row["ID_Room"].">
         <TD>" . $row["ID_Room"] .
         "</TD><TD>Osoby: " . $row["Capacity"] .
         "</TD><TD>Cena: " . $row["StandardPrice"] .
         "</TD></TR>\n";
         }

mysqli_free_result($result);
mysqli_close($link);
echo "</table>";
?>

第二个是简单的空 html table:

<table width='50%' id="second">
</table>

还有我的 jQuery 代码可以从一行到另一行：

$( document ).ready(function() {
$("#addElements").click(function(){
    console.log("event");
    $("#first tr").filter(".selected").each(function( index ){
        $("#second").append("<tr>" + $(this).html() + "</tr>");
        $(this).empty();
    });
});
$("#first td").click(function(){
    if( $(this).parent().hasClass( "selected" ) ){
          $(this).parent().removeClass("selected");
    }
    else{
        $(this).parent().addClass("selected");
    }
});
});

那么你能告诉我如何从第二个 table 中求和 standardprice 列并将其保存到 <p></p> 或 <div></div> 或完美的是 php 变量或<input type="text">?

Answer 1

将 standardPrice 的值放入数据属性中，例如：

echo "<TR class='' id='pokoj$row["ID_Room"]' name='pokoj$row["ID_Room"]'>
         <TD>$row["ID_Room"]</TD>
         <TD>Osoby: $row["Capacity"]</TD>
         <TD class="s-price" data-standard-price='$row["StandardPrice"]'>Cena: $row["StandardPrice"]</TD>
     </TR>\n";

然后在 jquery 中执行此操作：

var sum = 0;
$( "td.s-price" ).each(function( index ) {
  sum += $( this ).data('standard-price');
});
alert(sum);

Answer 2

首先，您需要 select 每个第 3 列，这可以使用 #second td:nth-child(3) 完成。其次，您需要使用 .replace('Cena: ','') 从每个值中 trim Cena:，然后使用 parseInt() 将值转换为整数。第三，求和并显示结果。

var sum = 0;
$("#second td:nth-child(3)").each(function(){
    sum += parseInt($(this).text().replace('Cena: ',''));
});
$("#yourDesiredElement").html(sum);

这将放在您的 $("#first tr").filter(".selected").each(function( index ){ 内，但在您的 $("#second").append( 之后。

Answer 3

添加一行后需要调用此函数。 [0,1] 表示第一个和下一个会有总和。您可以根据要添加总和的列来更改此设置。 3 是 table.

中的总列数

function addtfoot(tblname,cols,size){
 var colArray = new Array(size);
 $.each(cols,function(i,v){
  let sum = 0;
  let j = 1;
  $("[name='"+tblname+"'] tbody tr").each(function(index, value){
   sum = sum + +($(value).find("td:eq("+v+")").text());
   j++;
  });
   colArray[v] = sum;
 });
 
 HTMLstr = "<tfoot><tr class='w3-teal'>";
 $.each(colArray,function(i,v){
    if(v==null){v=""};
    HTMLstr = HTMLstr + "<td>" + v + "</td>";
 });
 HTMLstr = HTMLstr + "</tr></tfoot>";
 $("[name='"+tblname+"'] tfoot").remove();
 $("[name='"+tblname+"'] ").append(HTMLstr);
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<table name="tablename" class="w3-table-all w3-hoverable">
  <tbody>
    <tr>
     <th>Col1</th>
  <th>Col2</th>
        <th>Col3</th>
    </tr>
 <tr>
      <td>2</td>
      <td>45</td>
      <td>100</td>
     </tr>
     <tr>
      <td>3</td>
      <td>60</td>
      <td>200</td>
     </tr>
  </tbody>
</table>
<button class="w3-button w3-margin w3-right w3-teal" onclick="addtfoot('tablename',[0,1],3);">Add Summation</button>

html 中列的总和值

Sum values from column in html

html

php

jquery