Вопрос по jquery, javascript – Общая сумма для столбца в JQuery

6

Следующий код не работает. Мне нужно сложить все по столбцам, как вы можете видеть наjsfiddle, Что не так?

HTML
<table id="sum_table" width="300" border="1">
    <tr>
        <td>Apple</td>
        <td>Orange</td>
        <td>Watermelon</td>
    </tr>
    <tr>
        <td class="rowDataSd">1</td>
        <td class="rowDataSd">2</td>
        <td class="rowDataSd">3</td>
    </tr>
    <tr>
        <td class="rowDataSd">1</td>
        <td class="rowDataSd">2</td>
        <td class="rowDataSd">3</td>
    </tr>
    <tr>
        <td class="rowDataSd">1</td>
        <td class="rowDataSd">2</td>
        <td class="rowDataSd">3</td>
    </tr>
    <tr class="totalColumn">
        <td class="totalCol">Total:</td>
        <td class="totalCol">Total:</td>
        <td class="totalCol">Total:</td>
    </tr>
</table>
Javascript
$(document).ready(function(){


   $(".rowDataSd").each(function() {
      newSum.call(this);
    });

});


function newSum() {
    var $table = $(this).closest('table');
    var total = 0;

    $(this).attr('class').match(/(\d+)/)[1];

$table.find('tr:not(.totalColumn) .rowDataSd').each(function()  {
        total += parseInt($(this).html());

});

$table.find('.totalColumn td:nth-child('')').html(total);
}
Ваш код JavaScript содержит довольно много ошибок. Все показано в консоли. Пожалуйста, сначала проверьте свой код, прежде чем спрашивать здесь. Sirko
Проверьте мой ответ здесь:stackoverflow.com/a/10702457/259656 Richard

Ваш Ответ

7   ответов
1

Вот, пожалуйста, сэр!http://jsfiddle.net/47VDK/

3

Альтернативный способ:

$(document).ready(function(){   
    for (i=0;i<$('#sum_table tr:eq(0) td').length;i++) {
       var total = 0;
        $('td.rowDataSd:eq(' + i + ')', 'tr').each(function(i) {
           total = total + parseInt($(this).text());
        });            
        $('#sum_table tr:last td').eq(i).text(total);
    }

});

Пример:http://jsfiddle.net/lucuma/unKDk/10/

@lucuma и, что более важно, другие, кто придет к этому вопросу в поисках решений, найдут (субъективно) лучший ответ.
спасибо: D именно то, что я ищу. Redbox
Вы можете проголосовать за них всех. :)
@Greasyque Поскольку вы новичок, принято пометить один из ответов как принятый (щелкнув галочку). И вы, и тот, кто отвечает на ваш вопрос, получают очки.
@jbabey, я согласен, и я даже не имел в виду, что он пометил мой ответ только тем, что он пометил один из ответов, которые здесь работают.
12

Вотjsffile, надеюсь это поможет

  <table id="sum_table" width="300" border="1">
        <tr class="titlerow">
            <td>Apple</td>
            <td>Orange</td>
            <td>Watermelon</td>
        </tr>
        <tr>
            <td class="rowDataSd">1</td>
            <td class="rowDataSd">2</td>
            <td class="rowDataSd">3</td>
        </tr>
        <tr>
            <td class="rowDataSd">1</td>
            <td class="rowDataSd">2</td>
            <td class="rowDataSd">3</td>
        </tr>
        <tr>
            <td class="rowDataSd">1</td>
            <td class="rowDataSd">5</td>
            <td class="rowDataSd">3</td>
        </tr>
        <tr class="totalColumn">
            <td class="totalCol">Total:</td>
            <td class="totalCol">Total:</td>
            <td class="totalCol">Total:</td>
        </tr>
    </table> 
<script>
       var totals=[0,0,0];
        $(document).ready(function(){

            var $dataRows=$("#sum_table tr:not('.totalColumn, .titlerow')");

            $dataRows.each(function() {
                $(this).find('.rowDataSd').each(function(i){        
                    totals[i]+=parseInt( $(this).html());
                });
            });
            $("#sum_table td.totalCol").each(function(i){  
                $(this).html("total:"+totals[i]);
            });

        });
</script>
таким образом, вы удаляете итоги [0] и итоги [1]. каждый на ".rowBB" переопределит те же значения (итоги [0], итоги [1]). Вот почему вы продолжаете иметь 0 для других. это другая ситуация. Проверь этоfiddle
это тривиально. каждый на вашем ".rowAA" будет повторяться от 0 до 2.
вопрос обновлен:jsfiddle.net/unKDk/15 если у меня есть несколько столбцов с другим именем класса, он не работает. Redbox
это для строки итогоfiddle
2. Как рассчитать итоговую сумму строки? Redbox
2

Я знаю, что на этот вопрос уже получен хороший ответ, но я начал работать над этим решением раньше, чем все ответы пришли, и хотел продолжить и опубликовать его.

Это решение работает с HTML, как вы его опубликовали, и предполагает 4 вещи: 1) первая строка является строкой заголовка, 2) последняя строка является строкой итогов, 3) каждая строка имеет одинаковые столбцы, и 4) столбцы содержат целые числа. В этом случае необходимо определить только таблицу.

$(document).ready(function(){
    totalRows("#sum_table");
});

function totalRows(tableSelector) {
    var table = $(tableSelector);
    var rows = table.find("tr");
    var val, totals = [];

    //loop through the rows getting values in the rowDataSd columns
    rows
        .each(function(rIndex) {
            if (rIndex > 0 && rIndex < (rows.length-1)) { //not first or last row
                //loop through the columns
                $(this).find("td").each(function(cIndex) {
                    val = parseInt($(this).html());
                    (totals.length>cIndex) ? totals[cIndex]+=val : totals.push(val);
                });
            }
        })
        .last().find("td").each(function(index) {
            val = (totals.length>index) ? totals[index] : 0;
            $(this).html( "Total: " + val );
        });
}
​
​
отлично, другой способ подойти к решению :) Redbox
7

jsFiddle with example

Чтобы достичь этого, мы можем в полной мере воспользоватьсяthead а такжеtfoot теги в пределахtable элемент. С небольшими изменениями мы имеем следующее:

HTML

<table id="sum_table" width="300" border="1">
    <thead>                
        <tr>
            <th>Apple</th>
            <th>Orange</th>
            <th>Watermelon</th>
        </tr>
    </thead>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tfoot>
        <tr>
            <td>Total:</td>
            <td>Total:</td>
            <td>Total:</td>
        </tr>
    </tfoot>
</table>​​​​​​​​​​​​​​​

Это тогда позволяет нам более конкретно ориентировать элементы, которые мы хотим, то есть, сколько столбцов там и что такое «итоговое». клетка.

JavaScript

$(document).ready(function()
{
    $('table thead th').each(function(i)
    {
        calculateColumn(i);
    });
});

function calculateColumn(index)
{
    var total = 0;
    $('table tr').each(function()
    {
        var value = parseInt($('td', this).eq(index).text());
        if (!isNaN(value))
        {
            total += value;
        }
    });

    $('table tfoot td').eq(index).text('Total: ' + total);
}​
это выглядит лучше, чем другие версии: D спасибо, Ричард Redbox
3

Это легко сделать с помощью небольшой настройки классов на вашем столе:

HTML:

<table id="sum_table" width="300" border="1">
    <tr>
        <td>Apple</td>
        <td>Orange</td>
        <td>Watermelon</td>
    </tr>
    <tr>
        <td class="col1">1</td>
        <td class="col2">2</td>
        <td class="col3">3</td>
    </tr>
    <tr>
        <td class="col1">1</td>
        <td class="col2">2</td>
        <td class="col3">3</td>
    </tr>
    <tr>
        <td class="col1">1</td>
        <td class="col2">2</td>
        <td class="col3">3</td>
    </tr>
    <tr>
        <td class="total">Total:</td>
        <td class="total">Total:</td>
        <td class="total">Total:</td>
    </tr>
</table>​

JS:

var getSum = function (colNumber) {
    var sum = 0;
    var selector = '.col' + colNumber;

    $('#sum_table').find(selector).each(function (index, element) {
        sum += parseInt($(element).text());
    });  

    return sum;        
};

$('#sum_table').find('.total').each(function (index, element) {
    $(this).text('Total: ' + getSum(index + 1)); 
});

http://jsfiddle.net/unKDk/9/

по какой-то причине мне нужно, чтобы все имя класса было одинаковым, а не другим именем класса Redbox
Вы можете иметь несколько имен классов, разделенных пробелами.
6
$('#sum_table tr:first td').each(function(){
   var $td = $(this); 

    var colTotal = 0;
    $('#sum_table tr:not(:first,.totalColumn)').each(function(){
        colTotal  += parseInt($(this).children().eq($td.index()).html(),10);
    });

    $('#sum_table tr.totalColumn').children().eq($td.index()).html('Total: ' + colTotal);
});

Живой пример:http://jsfiddle.net/unKDk/7/

Похожие вопросы