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

Question

我已创建时的任何值改变时动态计算细胞总数值的HTML表格。我想可以在页面加载计算，而不是“合计”值只是变化。我使用事件侦听器时，做出改变来计算。

我已经使用事件“负荷”尝试，但没有奏效。下面是我的codepen。

------------------- 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+"'>";
                                         }

                          }
           }

我希望计算在那里时页面会被带入。

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

Answer 1

注：所提供的代码不匹配当前所提供的Codepen所示的代码。这个答案引用什么是目前在Codepen（这里分叉供参考：https://codepen.io/anon/pen/daWOyy?editors=1011）。

我看到你的代码，防止在页面加载所计算的值的两个主要问题。

第一个是，该方法calculate()仅设置甚至听者，但实际上不执行任何计算逻辑（这逻辑将只当收听火灾执行）。为了解决这个问题，我建议你重构代码，这样的计算逻辑是在它自己的方法，然后将其从事件侦听器调用。

第二个问题是，我相信计算逻辑将无法正常工作，直到buildTable()调用后，所以不是从主叫calculate()负载处理程序，从阿贾克斯处理程序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代表选择器。