Question

嗨我需要显示一列中的值的总和，但是在按钮点击后我会动态添加行。例如，我检查第一个表中的行，单击按钮，该行转到第二个表，从第二个表我需要总和一列。这就是看我的桌子和我需要总结的标准价格＆＃39;并将其发送到<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 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");
    }
});
});

那么你能告诉我如何从第二个表中总结standardprice列并将其保存到<p></p>或<div></div>或完美它将是php变量或<input type="text">？

Answer 1

首先，您需要选择每个第3列，这可以使用#second td:nth-child(3)完成。第二，您需要使用Cena:修剪每个值的.replace('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 2

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

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>

Answer 3

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

来自html中列的值

3 个答案: