javascript - javascript中的表格总和特定列

Question

我在如何根据状态获取总金额列时遇到问题。目前我只管理我所有的金额列的总和。问题是我想得到 paid 的总和值和 unpaid金额状态，例如 Paid 下方的图像总应15000和 Unpaid应该 10000 .如果有人能弄清楚我在哪里做错了，那就太好了。非常感谢你

var tds = document.getElementById('table').getElementsByTagName('td');
            var sum = 0;
            for(var i = 0; i < tds.length; i ++) {
                if(tds[i].className == 'count-me') {
                    sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
                }
            }
            document.getElementById('table').innerHTML += '<tr><td>' + sum + '</td><td>total</td></tr>';

<table id="table">
        <tr>
            <th >Status</th>
            <th >AMOUNT</th>
        </tr>
            <tr>
                <td >Paid</td>
                <td class="count-me">5000</td>
            </tr>
            <tr>
                <td >Paid</td>
                <td class="count-me"> 5000</td>
            </tr>
            <tr>
                <td >Unpaid</td>
                <td class="count-me">5000</td>
            </tr>
             <tr>
                <td >Unpaid</td>
                <td class="count-me">5000</td>
            </tr>
             <tr>
                <td >Paid</td>
                <td class="count-me">5000</td>
            </tr>
        </table>

Answer 1

有很多方法。这是其中之一:

var tds = document.getElementById('table').getElementsByTagName('td');
var sum = 0;
var sumPaid = 0;
var sumUnpaid = 0;
            
            for(var i = 0; i < tds.length; i ++) {
                if(tds[i].className == 'count-me') {
                    sumPaid += tds[i-1].innerHTML == 'Paid' ? +tds[i].innerHTML : 0;
                    sumUnpaid += tds[i-1].innerHTML == 'Unpaid' ? +tds[i].innerHTML : 0;
                    sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
                }
            }
            document.getElementById('table').innerHTML += '<tr><td>' + sum + '</td><td>total</td></tr>';
            document.getElementById('table').innerHTML += '<tr><td>' + sumPaid + '</td><td>total paid</td></tr>';     
            document.getElementById('table').innerHTML += '<tr><td>' + sumUnpaid + '</td><td>total unpaid</td></tr>';

<table id="table">
        <tr>
            <th >Status</th>
            <th >AMOUNT</th>
        </tr>
            <tr>
                <td >Paid</td>
                <td class="count-me">5000</td>
            </tr>
            <tr>
                <td >Paid</td>
                <td class="count-me"> 5000</td>
            </tr>
            <tr>
                <td >Unpaid</td>
                <td class="count-me">5000</td>
            </tr>
             <tr>
                <td >Unpaid</td>
                <td class="count-me">5000</td>
            </tr>
             <tr>
                <td >Paid</td>
                <td class="count-me">5000</td>
            </tr>
        </table>

我希望这就像一个家庭作业或什么的。在实际应用程序中，您不会以这种方式做事。您在呈现页面或使用某种框架作为帮助之前进行此类计算。
我认为一个好的建议是让你开始学习使用 React 或 Angular 之类的框架，甚至更好地使用函数式编程。