Общая сумма отфильтрованной таблицы с использованием vanilla JS

Единственное соображение по этому вопросу заключается в том, что на данный момент я не использую jQuery. Вот код:

//I think here is where the problem relies, in the function I'm using to calculate the sum of the values under 'Valor' column:
var t1 = document.getElementById("emp-table");
getSum();
function getSum() {
  var sumVal = 0;
  for(var i = 1; i < t1.rows.length; i++){
    sumVal = sumVal + parseInt(t1.rows[i].cells[6].innerHTML);
    document.getElementById("sumV").innerHTML = "Sum Value = "+sumVal;
  }
};

function getUniqueValuesFromColumn() {
    var unique_col_values_dict = {}
    allFilters = document.querySelectorAll(".table-filter")
    allFilters.forEach((filter_i) => {
        col_index = filter_i.parentElement.getAttribute("col-index");
        const rows = document.querySelectorAll("#emp-table > tbody > tr")
        rows.forEach((row) => {
            cell_value = row.querySelector("td:nth-child("+col_index+")").innerHTML;
            if (col_index in unique_col_values_dict) {
                if (unique_col_values_dict[col_index].includes(cell_value)) {
                    //console.log("already exists");
                } else {
                    unique_col_values_dict[col_index].push(cell_value)
                }
            } else {
                unique_col_values_dict[col_index] = new Array(cell_value)
            }
        }); 
    });
    updateSelectOptions(unique_col_values_dict)
};

function updateSelectOptions(unique_col_values_dict) {
    allFilters = document.querySelectorAll(".table-filter")
    allFilters.forEach((filter_i) => {
        col_index = filter_i.parentElement.getAttribute('col-index')
        unique_col_values_dict[col_index].forEach((i) => {
            filter_i.innerHTML = filter_i.innerHTML + `\n<option value="${i}">${i}</option>`
        });

    });
};

function filter_rows() {
    allFilters = document.querySelectorAll(".table-filter")
    var filter_value_dict = {}
    allFilters.forEach((filter_i) => {
        col_index = filter_i.parentElement.getAttribute('col-index')
        value = filter_i.value
        if (value != "all") {
            filter_value_dict[col_index] = value;
        }
    });
    var col_cell_value_dict = {};
    const rows = document.querySelectorAll("#emp-table tbody tr");
    rows.forEach((row) => {
        var display_row = true;
        allFilters.forEach((filter_i) => {
            col_index = filter_i.parentElement.getAttribute('col-index')
            col_cell_value_dict[col_index] = row.querySelector("td:nth-child(" + col_index+ ")").innerHTML
        })
        for (var col_i in filter_value_dict) {
            filter_value = filter_value_dict[col_i]
            row_cell_value = col_cell_value_dict[col_i]
            if (row_cell_value.indexOf(filter_value) == -1 && filter_value != "all") {
                display_row = false;
                break;
            }
        }
        if (display_row == true) {
            row.style.display = "table-row"
        } else {
            row.style.display = "none"
        }
    })
};

//And finally, the 'onload' part to update the content:
window.onload = () => {
    console.log(document.querySelector("#emp-table > tbody > tr:nth-child(1) > td:nth-child(2) ").innerHTML);
};
getUniqueValuesFromColumn()
<body>
    <div class="container">
        <div class="card">
            <div class="card-header">
                Lista Pagos
            </div>
            <div class="card-body">
                <table id="emp-table" class="table">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th col-index = 2>Persona
                            <select class="table-filter" onchange="filter_rows()">
                                <option value="all"></option>
                            </select>
                            </th>
                            <th col-index = 3>Servicio
                            <select class="table-filter" onchange="filter_rows()">
                                <option value="all"></option>
                            </select>
                            </th>
                            <th col-index = 4>Año
                            <select class="table-filter" onchange="filter_rows()">
                                <option value="all"></option>
                            </select>
                            </th>
                            <th col-index = 5>Mes
                            <select class="table-filter" onchange="filter_rows()">
                                <option value="all"></option>
                            </select>
                            </th>
                            <th>id Recibo</th>
                            <th>Valor</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td> 33 </td>
                            <td> David Camacho </td>
                            <td> Gas </td>
                            <td> 2022 </td>
                            <td> 4 </td>
                            <td> 7 </td>
                            <td> 10000 </td>
                        </tr>
                    
                        <tr>
                            <td> 32 </td>
                            <td> Héctor Camacho </td>
                            <td> Gas </td>
                            <td> 2022 </td>
                            <td> 4 </td>
                            <td> 7 </td>
                            <td> 15075 </td>
                        </tr>
                    
                        <tr>
                            <td> 30 </td>
                            <td> Héctor Camacho </td>
                            <td> Seguro exequial </td>
                            <td> 2022 </td>
                            <td> 4 </td>
                            <td> 6 </td>
                            <td> 11100 </td>
                        </tr>
                    
                        <tr>
                            <td> 29 </td>
                            <td> María Camacho </td>
                            <td> Seguro exequial </td>
                            <td> 2022 </td>
                            <td> 4 </td>
                            <td> 6 </td>
                            <td> 11100 </td>
                        </tr>
                    
                        <tr>
                            <td> 28 </td>
                            <td> Mateo León </td>
                            <td> Internet </td>
                            <td> 2022 </td>
                            <td> 4 </td>
                            <td> 1 </td>
                            <td> 20000 </td>
                        </tr>
                    
                        <tr>
                            <td> 27 </td>
                            <td> David Camacho </td>
                            <td> Internet </td>
                            <td> 2022 </td>
                            <td> 4 </td>
                            <td> 1 </td>
                            <td> 11600 </td>
                        </tr>
                    
                        <tr>
                            <td> 24 </td>
                            <td> Alba Camacho </td>
                            <td> Internet </td>
                            <td> 2022 </td>
                            <td> 4 </td>
                            <td> 1 </td>
                            <td> 11600 </td>
                        </tr>
                    
                        <tr>
                            <td> 23 </td>
                            <td> María Camacho </td>
                            <td> Internet </td>
                            <td> 2022 </td>
                            <td> 4 </td>
                            <td> 1 </td>
                            <td> 11600 </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <p id="sumV"></p>
        <br/>
        <br/>
    </div>
</body>

Итак, на данный момент, когда я загружаю страницу, тег <span> уже имеет общую сумму, если мы рассматриваем все строки. Но всякий раз, когда я фильтрую таблицу, значение там не меняется. Сначала я пытался сделать это с помощью кнопки с помощью onclick, но каждый раз, когда я нажимал на нее, общее значение менялось на «неопределенное». Вот почему я удалил эту кнопку и подумываю обновить содержимое тега <span> сегментом onload моего кода, но пока не смог этого добиться.

Любая помощь приветствуется, ура!

Есть 2 проблемы. Вам нужно вызвать getSum в конце вашей функции filter_rows. И вам также нужно изменить getSum, чтобы считать только видимые строки. Существующий код подсчитывает все строки, как скрытые, так и видимые. Простым решением может быть вычисление суммы в том же цикле, который вы фильтруете. В любом случае, проблемы очень незначительны и легко устраняются.

Yogi 23.04.2022 03:25
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
1
30
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вы можете заменить свою функцию getSum на следующую

function getSum() {
  const rows = [...document.querySelectorAll('#emp-table tr').values()];
  const visibleRows = rows.filter(row => {
    return row.style.display !== 'none';
  });

  let sumVal = 0;
  for (let visibleRow of visibleRows){
    sumVal += parseInt(visibleRow.cells[6].innerHTML);
  }
  document.getElementById("sumV").innerHTML = "Sum Value = " + sumVal;
};

По сути, вы сначала фильтруете строки на основе их значения display, чтобы получить только visibleRows, а затем суммируете значения.

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

Yogi 23.04.2022 03:28

Спасибо!! как указывает @Yogi, функция должна вызываться каждый раз при изменении таблицы. Кроме того, поскольку он извлекает значение int для первой строки как NaN, я просто добавил ' || 0 ', чтобы избежать нарушения суммы.

mlc 23.04.2022 04:02

Другие вопросы по теме