如何訪問資料表頁腳的第二行

我想<tr>在我的資料表的頁腳中添加一秒鐘以顯示總計（在做了一些總和之后）。

所有的計算都已經在作業了，我只想在頁腳的第二行注入rowSumwhen的值j >= 12。

所需結果的概念（裁剪影像）：

這是我嘗試過的：

1. ?向資料表添加一秒鐘<tr>（作業）
2. ?將值注入rowSum到頁腳第二行的最后一列（我想我在這里做錯了什么）

這是我認為錯誤的代碼部分：

$('#example > tfoot  > tr').each(function(index, tr) {
    var rowSum = 0;
    for (let j = 0; j < 12; j  ) {
        if (j >= 2) {
            var tdCellValue = numberFromString(tr.cells[j].innerText);
            rowSum = rowSum   tdCellValue;
        }
        if (j >= 11) {
            tr.cells[12].innerText = rowSum;
            tr[1].cells[12].innerText = rowSum;
        }
    }
});

在這里，我試圖訪問頁腳的第二行：tr[1].cells[12].innerText = rowSum;我認為這是我犯錯誤的地方。

演示JS BIN

有誰知道如何訪問資料表頁腳的第二行并正確注入值？

uj5u.com熱心網友回復：

只需將您的 JS 代碼替換為以下內容。這是作業檔案的演示。

<script>
    $(document).ready(function() {
    
        
        var DT1 = $('#example').DataTable({
    
            columnDefs: [{
                orderable: false,
                className: 'select-checkbox',
                targets: 0,
            }],
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            order: [
                [1, 'asc']
            ],
            "language": {
                "info": "Showing _START_ to _END_ of _TOTAL_ Projects",
                "infoEmpty": "Showing 0 to 0 of 0 Projects",
                "infoFiltered": "(filtered from _MAX_ total Projects)"
            },
            "pagingType": "numbers",
            dom: 'rtip',
            initComplete: function(settings, json) {
                // calculate the sum when table is first created:
                doSum();
            }
        });
    
        $('#example').on('draw.dt', function() {
            // re-calculate the sum whenever the table is re-displayed:
            doSum();
        });
        $(".selectAll").on("click", function(e) {
            if ($(this).is(":checked")) {
                DT1.rows().select();
            } else {
                DT1.rows().deselect();
            }
        });
        
        // This provides the sum of all records:
        function doSum() {
            // get the DataTables API object:
            var table = $('#example').DataTable();
            // set up the initial (unsummed) data array for the footer row:
            var totals = ['', 'Total:', 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
            // iterate all rows - use table.rows( {search: 'applied'} ).data()
            // if you want to sum only filtered (visible) rows:
            totals = table.rows().data()
                // sum the amounts:
                .reduce(function(sum, record) {
                    for (let i = 2; i <= 12; i  ) {
                        sum[i] = sum[i]   numberFromString(record[i]);
                    }
                    return sum;
                }, totals);
            // place the sum in the relevant footer cell:
            for (let i = 1; i <= 12; i  ) {
                var column = table.column(i);
                $(column.footer()).html(formatNumber(totals[i]));
            }
            
            
            $('#example > tbody  > tr').each(function(index, tr) { 
         var rowSum=0;
            for(let j=0; j<12; j  )
            {               
                if(j>=2){
                 var tdCellValue=  numberFromString(tr.cells[j].innerText);
                 rowSum=rowSum tdCellValue;
                }
                if(j >=11){
                 tr.cells[12].innerText=rowSum;          
                }
            }
        });
        var grandTotal=0;
       $('#example > tfoot  > tr').each(function(index, tr) {
              if(index<1){
              grandTotal=0;
                var rowSum = 0;
                for (let j = 0; j < 12; j  ) {
                    if (j >= 2) {
                        var tdCellValue = numberFromString(tr.cells[j].innerText);
                        rowSum = rowSum   tdCellValue;
                    }
                    if (j >= 11) {
                        tr.cells[12].innerText = rowSum;                    
                        grandTotal=rowSum;
                    }
                }
              }else{
                 tr.cells[11].innerText = "Grand Total";
                 tr.cells[12].innerText = grandTotal;
              }
            });
        }
    
        function numberFromString(s) {
            return typeof s === 'string' ?
                s.replace(/[\$,]/g, '') * 1 :
                typeof s === 'number' ?
                s : 0;
        }
    
        function formatNumber(n) {
            return n.toLocaleString(); // or whatever you prefer here
        }
    });
    </script>

uj5u.com熱心網友回復：

如果你想最后一列的計算值，你需要得到所有細胞的總和在此行中（不是2行與$（“＃示例> TFOOT> TR”）每。 - >在HTML中，有2 TR）

$('#example > tfoot  > tr').each(function(index, tr) {
    if (index == 0) {
        var rowSum = 0;
        for (let j = 0; j < totalCol; j  ) {
            if (j >= 2 && j < 12) {
                var tdCellValue = numberFromString(tr.cells[j].innerText);
                rowSum = rowSum   tdCellValue;
            }
            if (j >= 12) {
                tr.cells[12].innerText = rowSum;
                //    tr[1].cells[12].innerText = rowSum;
            }
        }
    }
});

標籤：javascript 查询 数据表

上一篇：Vue.js中的事件處理

下一篇：toLocaleDateString在打字稿中不起作用？