2013-09-24 2 views
0

Im пытается добиться следующего: добавьте числа из двух столбцов таблицы, выполните следующую операцию над ними ($ price2 - $ price1)/$ price1 * 100, а затем добавьте результат в верхней части таблицы в специальном div.Javascript для добавления и сравнения двух итоговых итогов таблицы таблицы

<div id="mydiv">Percentage Gain/Loss</div> 
<table id="mytable"> 
<tbody> 
<tr> 
     <th>price1</th><th>price2</th> 
    </tr> 
    <tr> 
     <td>10</td><td>30</td> 
    </tr> 
    <tr> 
     <td>5</td><td>10</td> 
    </tr> 
    <tr> 
     <td>15</td><td>5</td> 
    </tr> 
</tbody> 
</table> 

Таким образом, требуемая операция будет заполнить #mydiv с результатами ((30 + 10 + 5) - (10 + 5 + 15))/(10 + 5 + 15) * 100 Что бы лучший способ добиться этого? Кроме того, если цена2 должна быть ниже цены1, выход должен быть отрицательным (я думаю, что-то вроде -Math.abs будет работать).

+1

** 1 ** Найдите способ, чтобы получить эти значения ** 2 ** ли математику на них (смотрите в 'ParseInt()') * * 3. ** Поместите значение в div. Дайте ему попробовать. Если вы застряли, отправьте код. – ColBeseder

ответ

1

Вы можете использовать getElementsByTagName, чтобы получить элементы html, которые содержат ваши цены, а затем выполнить вычисления.

var sum1 = 0, sum2 = 0; 

var table = document.getElementById('mytable'); 
var rows = table.getElementsByTagName('tr'); // restrict the search to one table 
for (var i=0, length = rows.length; i<length; i++) { 
    var tds = rows[i].getElementsByTagName('td'); 
    if (tds.length >= 1) { 
    var val1 = +tds[0].innerHTML; // unary plus converts the value to Number 
    var val2 = +tds[1].innerHTML; 
    sum1 += val1; 
    sum2 += val2; 
    } 
} 

document.getElementById('mydiv').innerHTML = (sum2 - sum1)/sum1 * 100 + ''; 

Рабочая JsFiddle:.. http://jsbin.com/IqARONE/1/edit

+0

Спасибо, это отлично работает. Только одна вещь, мне нужно, чтобы вывести максимум 2 десятичных знака, где я должен добавить метод .toFixed (2)? – Epleroma

+0

Вы должны, вероятно, поставить его прямо перед установкой значения как innerHTML в конечной строке. Я добавил '', чтобы было очевидно, что значение будет строкой, вместо этого вы можете сделать .toFixed (2). Позаботьтесь о приоритете! – Tibos

1

я бы просто положить классы каждому td, что-то вроде:

<tr> 
     <th>price1</th><th>price2</th> 
    </tr> 
    <tr> 
     <td class="price1">10</td><td class="price2">30</td> 
    </tr> 
    <tr> 
     <td class="price1">5</td><td class="price2">10</td> 
    </tr> 
    <tr> 
     <td class="price1">15</td><td class="price2">5</td> 
    </tr> 

Тогда в вашем JavaScript, используйте метод getElementsByClassName, чтобы получить массив price1 тегов и второй массив price2 тегов, а затем использовать метод parseInt, чтобы получить фактическое значение внутри каждого тега и вычислить требуемое значение. Затем вы добавляете это значение, используя что-то вроде $('#mydiv').html(total). Надеюсь это поможет.

Смежные вопросы