代码之家 › 专栏 › 技术社区 › Datacrawler

使用jQuery的HTML表中的百分比共享(新行)

percentage share html jquery

Datacrawler · 技术社区 · 8 年前

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

下面是表格:

我正在尝试添加以下行:

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

出于某种原因,我可以在JSFIDLE中看到一些东西 在代码片段中,我没有得到任何结果 (jQuery相关??)。 https://jsfiddle.net/Templates/0002wsuq/

首先,我可以将这两个函数(check snippet或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>

1 回复 | 直到 8 年前

Datacrawler 8 年前

我找到了粘贴在下面的解决方案。我还使其适用于X数字数(tds)。计算第一个指标的百分比份额,即 AAAAAAAA 。

//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>