HTML table 与 jQuery 的百分比份额（新行）

Question

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

所以，这是 table：

我正在尝试添加以下行：

其中计算了两个单元格的百分比。（例如 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>

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>

HTML table 与 jQuery 的百分比份额（新行）

Percentage share in HTML table with jQuery (new row)

html

jquery

share

percentage