Рассчитайте только один столбец, а не все

Question

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

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

function calculateColumn(index) {
    var total = 1;
    $('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);
}
</script>

Answer 1

Вы, вероятно, не хотите l oop через все элементы th. Просто передайте index столбца, который вы хотите вычислить:

$(document).ready(function() {
   calculateColumn(2); // pass the index of the column to be calculated
});

function calculateColumn(index) {
    var total = 0; // also not sure why you set 1 here
    $('table tbody tr').each(function() {
        var value = parseInt($('td', this).eq(index).text());
        if (!isNaN(value)) {
            total += value;
        }
    });
    $('table tfoot td').eq(index).text('Total:' + total);
}

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <thead>
    <tr>
      <th>Product</th>
      <th>Model</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mobile</td>
      <td>XYZ23</td>
      <td>500</td>
    </tr>
    <tr>
      <td>Laptop</td>
      <td>MNH786</td>
      <td>2000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

Answer 2

Вы можете превратить это в плагин jQuery, чтобы упростить его повторное использование.

Ваша общая сумма должна начинаться с 0.

(function($) {
  $.fn.calculateColumn = function(index) {
    let total = 0;
    this.find('tbody tr').each(function() {
      var value = parseInt($(this).find('td').eq(index).text());
      if (!isNaN(value)) { total += value; }
    });
    this.find('tfoot tr td').eq(index).text(total);
  };
  $.fn.calculateAllColumns = function() {
    let self = this;
    this.find('thead th').each(function(index) {
      self.calculateColumn(index);
      console.log(`Total for column ${$(this).text()}: ${self.find('tfoot tr td').eq(index).text()}`);
    });
  };
})(jQuery);

$(document).ready(function() {
  $('table').calculateAllColumns();
});

table, th, td {
  text-align: center;
  font-size: smaller;
}
table {
  border-collapse: collapse;
}
table tbody tr:nth-child(even) {
  background: #F7F7F7;
}
th, td {
  padding: 0.5em;
}
thead {
  background: #DDD;
}
tfoot {
  border-top: thick double #DDD;
}
td:not(:last-child) {
  border-right: thin solid #EEE;
}

/** Stack snippet console */
.as-console-wrapper .as-console .as-console-row .as-console-row-code,
.as-console-wrapper .as-console .as-console-row:after {
  font-size: 0.667em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>A</th><th>B</th><th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>5</td><td>10</td><td>15</td></tr>
    <tr><td>10</td><td>20</td><td>30</td></tr>
  </tbody>
  <tfoot>
    <tr>
      <td>0</td><td>0</td><td>0</td>
    </tr>
  </tfoot>
</table>

Answer 3

Установите столбец td с nth-child и l oop сверх этого.

var sum = 0
$('tr td:nth-child(2)').each( function () {
  sum += +this.innerText
})

$('table tfoot td:nth-child(2)').text(sum)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>count</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>foo</td>
      <td>1</td>
    </tr>
    <tr>
      <td>bar</td>
      <td>10</td>
    </tr>
    <tr>
      <td>boo</td>
      <td>21</td>
    </tr>
    <tr>
      <td>far</td>
      <td>100</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>total:</td>
      <td></td>
    </tr>
  </tfoot>
</table>