时间戳

首页 > 解决方案 > 页面打开时如何预先计算表格单元格中的总数

javascript - 页面打开时如何预先计算表格单元格中的总数

问题描述

我创建了一个 html 表，当任何值发生变化时动态计算单元格的总值。我希望在页面加载时计算“总计”值，而不仅仅是在更改时计算。我使用事件侦听器来计算何时进行更改。

我曾尝试使用事件“加载”，但没有奏效。下面是我的代码笔。

--------------------HTML-------------------------------- --

      <table id="AdvStaffing" border="1" width="100%" height="300px">
                     <tr class="tblHeader">
                                    <td colspan="5">Advisor Staffing</td>
                     </tr>
                     <tr class="subHeader">
                                    <td>Region</td>
                                    <td>Pilot</td>
                                    <td>Name</td>
                                    <td>Trainer</td>
                     </tr>
      </table>

------------------JavaScript------------------- --------------

    $(document).ready(function() {                
              var BenAdvStaffing = document.querySelector("#AdvStaffing");
              calculate(BenAdvStaffing,"BenAdvStaffing");        
});



  function getColumnSum(tbl){
     var colSum=0;
     for (var i=0; i<tbl.rows.length; i++)
     {
        colSum = colSum + tbl.rows[i].cells[1].children[0].value;   
      }
     return colSum;
      }

       getData("Advisor Staffing");

             function getData(listName){  
               console.log(listName);
                           var root = 'https://my-json-server.typicode.com/isogunro/dashboard/posts';
               console.log(root);
                    $.ajax({
                        url: root,
                        method: 'GET'
                    }).then(function (data) { 
                      console.log(data);
                          if (listName == 'Advisor Staffing'){
                               buildTable(data,"#AdvStaffing",listName);
                          }
                    });                          


              }  

           function buildTable(data,tblIDName,lstName){    
                          var tblRef = document.querySelector(tblIDName);
                          var tblRow = data.length;
                          for (var x=0; x<data.length; x++){              
                                         var newRow = tblRef.insertRow(-1);                        
                                         if(tblIDName == "#AdvStaffing"){
                                           console.log(tblIDName); 
                                           var cell = newRow.insertCell(0);
                                           cell.innerHTML = "<input type='text' size='7' class='"+getClass(data[x].Region)+" column0' readonly value='"+data[x].Region+"'>";
                                           var cell2 = newRow.insertCell(1);                                             
                                           cell2.innerHTML = "<input type='text' size='5'  style='text-align:center' class='"+getClass(data[x].Region)+" column1' data-id='"+data[x].ID+"' data-columnName='Current' style='width:65px' value='"+data[x].Pilot+"'>";
                                                                         var cell3 = newRow.insertCell(2);                                             
                                           cell3.innerHTML = "<input type='text' column2'  size='5' style='text-align:center' class='"+getClass(data[x].Region)+" column2' data-id='"+data[x].ID+"' data-columnName='Deployed' style='width:55px' value='"+data[x].Name+"'>";

                                                        var cell4 = newRow.insertCell(3);                              
                                                                            cell4.innerHTML = "<input type='text' size='5'  style='text-align:center' class='"+getClass(data[x].Region)+" column3' data-id='"+data[x].ID+"' data-columnName='Vacant' style='width:55px' value='"+data[x].Trainer+"'>";
                                         }

                          }
           }

我希望在打开页面时进行计算。

代码笔： https ://codepen.io/isogunro/pen/BrQXPJ ?editors=1011

标签： javascript

解决方案

注意：提供的代码与提供的 Codepen 中当前显示的代码不匹配。该答案引用了 Codepen 中当前的内容（在此处分叉以供参考：https ://codepen.io/anon/pen/daWOyy?editors=1011 ）。

我发现您的代码存在两个主要问题，这些问题阻止了在页面加载时计算值。

第一个是该calculate()方法只设置了偶数监听器，实际上并没有执行任何计算逻辑（这个逻辑只会在监听器触发时执行）。为了解决这个问题，我建议重构你的代码，以便计算逻辑在它自己的方法中，然后从事件监听器中调用。

第二个问题是我相信计算逻辑在调用 after 之前不会起作用buildTable()，因此不要calculate()从加载处理程序调用，而是从 ajax 处理程序调用它getData()。

粗略的框架如何实现以上两个变化：

// This is the same as using $(document).ready(),
// and is recommended in jQuery 3.x
$(function () {    
    /*
    var tbl = ... get table element ...
    */

    // Since you're using jQuery, might as well use jQuery events
    // Also, using a delegate selector will ensure that only changes to input elements are handled
    $(tbl).on("change", "input", function (e) {
        // pass any necessary arguments to calculate()
        calculate();
    });

    // I would recommend calling getData() after page load as well.
    // You have to wait a short time before the AJAX request is sent,
    // but the bonus is you can be sure the document is loaded by the
    // time it returns
    getData("Advisor Staffing");
});

// accept any necessary parameters
function calculate () {
    /*
    ... calculation logic goes here ...
    */
}

function getData () {
    /* Setup and make ajax request with appropriate params */
    $.ajax().then(function (data) {
        // pass any necessary arguments to buildTable()
        buildTable();
        // pass any necessary arguments to calculate()
        calculate();
    });
}

更新：在上面的示例中演示 jQuery 委托选择器。

推荐阅读