jquery - 使用 jQuery 的 HTML 表格中的百分比份额（新行）

Question

我有一个表格，我设法将其转置，然后将类和 id 添加到特定的 html 标记（例如表格）。然后我将数字（用逗号）转换为整数。现在，我正在尝试计算百分比份额并将其显示在新行中。

所以，这是表：

我正在尝试添加以下行：

其中计算两个单元格的百分比。（例如 7262/9985*100 和 2723/9985*100）。

出于某种原因，我可以在 Jsfiddle 中看到一些在片段中我没有得到任何结果的内容（与 jQuery 相关？？）。https://jsfiddle.net/Templates/0002wsuq/

首先，我可以将两个函数（检查片段或 JSfiddle）合并为一个吗？其次，如何将其附加到新行？

//Add Class to Table (Total Column)
$(document).ready(function () {
    $('table tr:nth-child(2) td:nth-child(4)').addClass('Total');
});

//Add Class to Table (Second Row)
$(document).ready(function () {
    $('table tr:nth-child(2) td:nth-child(2), table tr:nth-child(2) td:nth-child(3)').addClass('Share');
});

//Add Id to Table 
$(document).ready(function () {
    $('table').attr('id', 'table_result');
});

//Calculate Percentage Change
var total_per = 0;
var totalNumber = 0;
var totalNumber2 = 0;
var cellNumber = 0;

//Get total number of cells
$.each($('#table_result td.Share'), function() {
  if (!isNaN($(this).text())) 
  {
    totalNumber2 = totalNumber2 + parseInt($(this).text().split(",").join(""));
  }
	
  return totalNumber2;

});


$.each($('#table_result td.Share'), function() {
  if (!isNaN($(this).text())) 
  {
    cellNumber = ((parseInt($(this).text().split(",").join(""))/totalNumber2)*100).toFixed(2) ;
    
    $('<td><span></span></td>')
     .text( cellNumber + '%' ).appendTo(this);
  }

});

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Roboto');

*{
  font-family: 'Roboto', sans-serif;
  text-transform:capitalize;
  overflow:hidden;
  margin: 0 auto;
  text-align:left;
}

table {
	color:#666;
	font-size:12px;
	background:#e13195;
	border:#ccc 1px solid;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
  border-collapse: collapse;
  width: 100%;
}

table td {
	padding:10px;
	border-top: 1px solid #ffffff;
	border-bottom:1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
	background: #fafafa;
	background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
	background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
  width: 6.9in;
}

table tbody tr:first-child td
{
	background: #e13195!important;
  color:#fff;
}

table tbody tr th
{
  padding:10px;
  border-left: 1px solid #e0e0e0;
	background: #e13195!important;
  color:#fff;
}

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

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

<table><tbody><tr><td>Ddddddddd</td><td>Ccccccccc</td><td>Bbbbbbbbb</td><td>Total</td></tr><tr><td>Aaaaaaaaa</td><td>7262</td><td>2723</td><td>9985</td></tr><tr><td>Rate</td><td>56</td><td>55</td><td>56</td></tr></tbody></table>

标签： jqueryhtmlsharepercentage

Answer 1

我找到了粘贴在下面的解决方案。我还让它适用于 X 个数字 (tds)。百分比份额是针对第一个指标Aaaaaaaaa计算的。

//Calculate how many dimension values we have  (transposed in the header which is a td in this case) --> We need that to find the tds and assign the "total" and "share" classes 
tdCount = $("tr:first td").length;

//Create the string that points to the Total td
stringTotaltd = 'table tr:nth-child(2) td:nth-child(' + tdCount + ')';

//Create the string that points to the Share tds
var stringTotaltdShare = '';

for (i = 2; i < tdCount; i++) {  //i has to start from 2 as the first column has the metric names
	stringTotaltdShare += 'table tr:nth-child(2) td:nth-child(' + i + '),';
}


//Remove the comma in the end
stringTotaltdShare = stringTotaltdShare.slice(0,-1);

//Add Class to Table (Total Column)
$(stringTotaltd).addClass('Total');

//Add Class to Table (Second Row)
$(stringTotaltdShare).addClass('Share');

//Add Id to Table 
$('table').attr('id', 'table_result');

//Calculate Percentage Change

var total_per = 0;
var totalNumber = 0;
var totalNumber2 = 0;
var cellNumber = 0;

//Get total number of cells
$.each($('#table_result td.Share'), function() {

	metric = parseInt($(this).text().split(",").join(""));
   
  if (!isNaN(metric)) 
  {
    totalNumber2 = totalNumber2 + metric;
  }
	
  return totalNumber2;

});

//Additional row for the percentage share


$("#table_result tbody tr:nth-last-child(2)").after('<tr id="percentage"></tr>');
$('<td></td>')
   .text('Percentage Share %').appendTo('#percentage');

$.each($('#table_result td.Share'), function() {
	metric = parseInt($(this).text().split(",").join(""));

	//Check whether metric value is a number
  if (!isNaN(metric)) 
  {
    cellNumber = ((parseInt($(this).text().split(",").join(""))/totalNumber2)*100).toFixed(2) ;
  }
  else
  {
  	cellNumber = 0;
  }

    //Create new tds for each percentage     
    $('<td></td>')
    .text( cellNumber + '%' ).appendTo('#percentage');

});
			
//Append last td for the new row
$('<td></td>')
   .text('-').appendTo('#percentage');  

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Roboto');

*{
  font-family: 'Roboto', sans-serif;
  text-transform:capitalize;
  overflow:hidden;
  margin: 0 auto;
  text-align:left;
}

table {
	color:#666;
	font-size:12px;
	background:#e13195;
	border:#ccc 1px solid;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
  border-collapse: collapse;
  width: 100%;
}

table td {
	padding:10px;
	border-top: 1px solid #ffffff;
	border-bottom:1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
	background: #fafafa;
	background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
	background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
  width: 6.9in;
}

table tbody tr:first-child td
{
	background: #e13195!important;
  color:#fff;
}

table tbody tr th
{
  padding:10px;
  border-left: 1px solid #e0e0e0;
	background: #e13195!important;
  color:#fff;
}

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

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

<table><tbody><tr><td>Ddddddddd</td><td>Ccccccccc</td><td>Bbbbbbbbb</td><td>Total</td></tr><tr><td>Aaaaaaaaa</td><td>7262</td><td>2723</td><td>9985</td></tr><tr><td>Rate</td><td>56</td><td>55</td><td>56</td></tr></tbody></table>