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()之后，计算逻辑才会起作用，因此，与其从on load处理程序中调用calculate()，不如从{ {1}}。

粗略的框架如何实现以上两个更改：

getData()

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

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

1 个答案: