Расчет в нескольких Html-таблицах на одной странице

Я хочу выполнять вычисления в конце каждой таблицы (в нижнем колонтитуле) на одной странице.

Предположим, у меня есть две таблицы, и я хочу выполнить вычисления в столбце «Общая сумма».

Как я могу это сделать, используя Jquery и Javascript?

Может быть более двух таблиц, поэтому убедитесь, что он работает с несколькими таблицами на одной странице.

Эти значения в таблице HTML получаются с помощью цикла for в Django.

Это изображение содержит 2 таблицы HTML, и мне нужны расчеты для обеих таблиц в столбце общей суммы.

<div class = "row">
<div class = "table-responsive col-md-6">

<table id = "example" class = "table table-striped table-bordered table-responsive-xl">
    <caption style = "caption-side:top; text-align: center;"><h3>Income</h3></caption>
    <thead class = "thead-dark">
    <tr>
        {#  <th>S No.</th>#}
            <th>Particulars</th>
            <th>Description</th>
            <th>Total Amount</th>

    </tr>
    </thead>
    <tbody>
    {% for item in all_profit %}
    {% if item.category.under == "Income" %}
        <tr>
        {#  <td>{{  }}&nbsp;</td>#}
            <td>{{item.category}}</td>
            <td>{{item.category.desc}}</td>
            <td>{{ item.balance }}&nbsp;</td>
       </tr>
    {% endif %}
    {% endfor %}
    </tbody>
            <tfoot>
        <tr class = "totalColumn">
            <td style = "visibility:hidden;"></td>
            <td>Total:</td>
        </tr>
    </tfoot>
</table>
</div>

Просто добавьте класс к каждому нижнему колонтитулу, содержащему ваше значение, и выполните над ними свои вычисления после завершения рендеринга таблиц.

— 19.12.2020 09:05

не могли бы вы опубликовать свои таблицы html

— 19.12.2020 09:13

конечно, я обновил свои вопросы и опубликовал код таблицы

— 19.12.2020 09:15

javascript jquery

19.12.2020 08:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

457

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

$(document).ready(function() {
  var total = 0;
  $('.income-amount').each(function(i, obj) {
    total += parseInt($(obj).text());
  });
  $('#income-total').text(total.toFixed(1));
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin = "anonymous">
<div class = "row">
  <div class = "table-responsive col-md-6">

    <table id = "example" class = "table table-striped table-bordered table-responsive-xl">
      <caption style = "caption-side:top; text-align: center;">
        <h3>Income</h3>
      </caption>
      <thead class = "thead-dark">
        <tr>
          <th>S No.</th>
          <th>Particulars</th>
          <th>Description</th>
          <th>Total Amount</th>

        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1&nbsp;</td>
          <td>A</td>
          <td> </td>
          <td class='income-amount'>2000.0&nbsp;</td>
        </tr>
        <tr>
          <td>1&nbsp;</td>
          <td>B</td>
          <td> </td>
          <td class='income-amount'>1400.0&nbsp;</td>
        </tr>
      </tbody>
      <tfoot>
        <tr class = "totalColumn">
          <td style = "visibility:hidden;"></td>
          <td id='income-total'>Total:</td>
        </tr>
      </tfoot>
    </table>
  </div>

Привет, @barzin. А что, если я хочу создать новую таблицу и поместить все значения дохода из нескольких таблиц в один столбец, просто добавив переменные с помощью jquery. Как??

— 21.12.2020 07:10

19.12.2020 09:36