Untitled

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                width: 100%;
            }
            th,td {
                padding: 5px;
            }
            th {
                background-color:rgb(0, 89, 255);
                color: white;
            }
        </style>
    </head>
    <body>
        <table id="t01">
            <tr>
                <th>STT</th>
                <th>Khách hàng</th>
                <th>Nợ cũ</th>
                <th>SL (cái)</th>
                <th>Tiền hàng</th>
                <th>VAT</th>
                <th>Tổng cộng</th>
                <th>Thanh toán</th>
                <th>Còn nợ</th>
                <th>Thay đổi</th>
            </tr>
            <tr style="background-color: whitesmoke;">
                <td>1</td>
                <td><a href="https://www.google.com/">Công ty Phú An</a></td>
                <td class="c1"><p style="text-align:right">2,435,117,579</p></td>
                <td class="c2"><p style="text-align:right">2,482</p></td>
                <td class="c3"><p style="text-align:right">663,849,900</p></td>
                <td class="c4"><p style="text-align:right">53,219,600</p></td>
                <td class="c5"><p>717,069,500</p></td>
                <td class="c6"><p style="text-align:right">0</p></td>
                <td class="c7"><p>3,152,187,079</p></td>
                <td><p style="text-align:center"><img src="pencil.png" style="text-align:center"></p></td>
            </tr>
            <tr style="background-color: whitesmoke;">
                <td>2</td>
                <td><a href="https://www.google.com/">Công ty Invico-Sắn</a></td>
                <td class="c1"><p style="text-align:right">8,108,871,560</p></td>
                <td class="c2"><p style="text-align:right">13,315</p></td>
                <td class="c3"><p style="text-align:right">6,550,708,240</p></td>
                <td class="c4"><p style="text-align:right">533,475,560</p></td>
                <td class="c5"><p>7,084,183,800</p></td>
                <td class="c6"><p style="text-align:right">4,182,000,000</p></td>
                <td class="c7"><p>11,011,055,360</p></td>
                <td><p style="text-align:center"><img src="pencil.png" style="text-align:center"></p></td>
            </tr>
            <tr style="background-color: whitesmoke; ">
                <td>1</td>
                <td><a href="https://www.google.com/">Công ty Phú An</a></td>
                <td class="result" id ="r1"><p style="text-align:right">2,435,117,579</p></td>
                <td class="result" id ="r2"><p style="text-align:right">2,482</p></td>
                <td class="result" id ="r3"><p style="text-align:right">663,849,900</p></td>
                <td class="result" id ="r4"><p style="text-align:right">53,219,600</p></td>
                <td class="result" id ="r5"><p>717,069,500</p></td>
                <td class="result" id ="r6"><p style="text-align:right">0</p></td>
                <td class="r7"><p>3,152,187,079</p></td>
                <td><p style="text-align:center"><img src="pencil.png" style="text-align:center"></p></td>
            </tr>
            <script style="background-color:gray;text-align:right;">
                window.onload=function(){

                    for (i=1;i<=7;++i){
                        sum=0;
                        n=document.getElementsByClassName("c"+i).length;
                        console.log(n);
                        for (j=0;j<n;++j){

                            sum+=parseInt(document.getElementsByClassName("c"+i).item(j).textContent.replace(/[^0-9\.]/g, ''), 10);

                        }
                        document.getElementById("r"+i).innerText=sum;
                    }
                }
                function myfunction(s){
                    var arr = document.getElementsByClassName(s)
                    var sum = 0,i;
                    for(i = 0; i < arr.length; i ++)
                        if(arr[i].id == s) sum += parseInt(arr[i].innerHTML.replace(/[^0-9\.]/g, ''), 10);
                    return sum;
                }
                function total(s){
                    var tab = document.getElementById('t01');
                    var row = tab.insertRow(), cell = row.insertCell();

                    var cell0 = row.insertCell();
                    cell0.innerHTML = s;
                    var cell1 = row.insertCell();
                    cell1.innerHTML = myfunction('c1').toLocaleString('en');
                    var cell2 = row.insertCell();
                    cell2.innerHTML = myfunction('c2').toLocaleString('en');
                    var cell3 = row.insertCell();
                    cell3.innerHTML = myfunction('c3').toLocaleString('en');
                    var cell4 = row.insertCell();
                    cell4.innerHTML = myfunction('c4').toLocaleString('en');
                    var cell5 = row.insertCell();
                    cell5.innerHTML = myfunction('c5').toLocaleString('en');
                    var cell6 = row.insertCell();
                    cell6.innerHTML = myfunction('c6').toLocaleString('en');
                    var cell7 = row.insertCell();
                    cell7.innerHTML = myfunction('c7').toLocaleString('en');
                }
                total("Sub_total");
                total("TOTAL");

            </script>
        </table>
    </body>
</html>