JQuery Math с таблицей HTML

Question

поэтому у меня есть таблица, похожая на следующую.

<table> 
 
<tr><th>My Table><th class="total"></th></tr> 
 
<tr><td class="title">title 1</td><td class="value">10%</td></tr> 
 

 
<tr><td class="title">title 1</td><td class="value">20%</td></tr> 
 

 
<tr><td class="title">title 1</td><td class="value">30%</td></tr> 
 

 
<tr><td class="title">title 1</td><td class="value">40%</td></tr> 
 
</table>

Я хотел, чтобы вычислить сумму всех ТД с классом «значение» (которое должно равняться 100). Затем я хочу разделить общее число «значение» (100) на число или строки таблицы (4), а затем отобразить новый результат (25) в «total» класса. Я пробовал несколько методов и не могу понять это. Любая помощь будет глубоко оценена!

Answer 1

Вы можете запросить клетки, содержащие ваши значения, используя document.querySelectorAll и подведении каждую клетку, вызывая parseFloat на innerHTML каждой ячейки, затем вставьте среднее значение в общую ячейку с помощью querySelectorAll снова. Нет необходимости в jQuery.

var valueCells = document.querySelectorAll('.value'); 
 
var sum = 0; 
 

 
for (var i = 0; i < valueCells.length; ++i) { 
 
    sum += parseFloat(valueCells[i].innerHTML); 
 
} 
 

 
document.querySelectorAll('.total')[0].innerHTML = (sum/valueCells.length).toFixed(2);

<table> 
 
<tr><th>My Table<th class="total"></th></tr> 
 
<tr><td class="title">title 1</td><td class="value">10%</td></tr> 
 

 
<tr><td class="title">title 1</td><td class="value">20%</td></tr> 
 

 
<tr><td class="title">title 1</td><td class="value">30%</td></tr> 
 

 
<tr><td class="title">title 1</td><td class="value">40%</td></tr> 
 
</table>

Answer 2

Вы можете попробовать ниже код .. Надеюсь, что это помогает

var total = 0; 
 
//loop through all td with class value 
 
$("td.value").each(function(index) { 
 
    //remove the last character from the text and convert to float 
 
    //then add it to variable total 
 
    total += parseFloat($(this).text().slice(0,-1)); 
 
}); 
 
//divide total with (number of rows - 1) 
 
//-1 to remove the first row which is the heading 
 
total = total/($("table tr").length - 1); 
 
//assign the result to th with class total 
 
$("th.total").text(total);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr><th>My Table><th class="total"></th></tr> 
 
<tr><td class="title">title 1</td><td class="value">10%</td></tr> 
 

 
<tr><td class="title">title 1</td><td class="value">20%</td></tr> 
 

 
<tr><td class="title">title 1</td><td class="value">30%</td></tr> 
 

 
<tr><td class="title">title 1</td><td class="value">40%</td></tr> 
 
</table>

Answer 3

Пробу способом, чтобы получить желаемый выход с помощью jquery:

вы можете иметь ответ с ограниченным до 2 знаков после запятой

Demo here

var total =0, count =0; 
 
//iterate through all tr without using index 
 
$('table .value').each(function() 
 
{ 
 
    //read inner html, add to a variable 
 
    total += parseFloat($(this).html().slice(0,-1)); 
 
    //get total number of '.value' 
 
    count ++; 
 
}); 
 
//show avg. output in '.total' th 
 
$('table .total').html((total/count).toFixed(2));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr><th>My Table</th><th class="total"></th></tr> 
 
<tr><td class="title">title 1</td><td class="value">10%</td></tr> 
 

 
<tr><td class="title">title 1</td><td class="value">20%</td></tr> 
 

 
<tr><td class="title">title 1</td><td class="value">30%</td></tr> 
 

 
<tr><td class="title">title 1</td><td class="value">40%</td></tr> 
 
</table>