性能問題循環通過錶行

Question

我正在使用jquery循環錶行並保存數據。如果表格有200行，表現緩慢。當我調用此方法時，我正在IE中獲取JavaScript消息「停止運行此腳本」。以下是我用來循環表格行的代碼。你能否讓我知道是否有更好的方法來做到這一點。

function SaveData() { 
    var $table = $('#' + gridid); 
    var rows = $table.find('tbody > tr').get(); 
    var transactions = [];   
    var $row, empno, newTransaction, $rowChildren; 
    $.each(rows, function(index, row) { 
     $row = $(row);     
     $rowChildren = $row.children("td");   
     if ($rowChildren.find("input[id*=hRV]").val() === '1') { 
      empno = $rowChildren.find("input[id*=tEmpno]").val(); 
      newTransaction = new Array();    
      newTransaction[0] = company;    
      newTransaction[1] = $rowChildren.find("input[id*=tEmpno]").val(); 
      newTransaction[2] = $rowChildren.find("input[id*=tPC]").val(); 
      newTransaction[3] = $rowChildren.find("input[id*=hQty]").val(); 
      newTransaction[4] = $rowChildren.find("input[id*=hPR]").val(); 
      newTransaction[5] = $rowChildren.find("input[id*=tJC]").val(); 
      newTransaction[6] = $rowChildren.find("input[id*=tL1]").val(); 
      newTransaction[7] = $rowChildren.find("input[id*=tL2]").val(); 
      newTransaction[8] = $rowChildren.find("input[id*=tL3]").val(); 
      newTransaction[9] = $rowChildren.find("input[id*=tL4]").val(); 
      newTransaction[10] = $rowChildren.find("input[id*=tL5]").val(); 
      newTransaction[11] = $rowChildren.find("input[id*=tL6]").val(); 
      newTransaction[12] = $rowChildren.find("input[id*=tL7]").val(); 
      newTransaction[13] = $rowChildren.find("input[id*=tL8]").val(); 
      newTransaction[14] = $rowChildren.find("input[id*=tL9]").val(); 
      newTransaction[15] = $rowChildren.find("input[id*=tL10]").val(); 
      newTransaction[16] = $rowChildren.find("input[id*=tSF]").val(); 
      newTransaction[17] = $rowChildren.find("input[id*=tCG]").val(); 
      newTransaction[18] = $rowChildren.find("input[id*=tTF]").val(); 
      newTransaction[19] = $rowChildren.find("input[id*=tWK]").val(); 
      newTransaction[20] = $rowChildren.find("input[id*=tAI]").val(); 
      newTransaction[21] = $rowChildren.find("input[id*=tWC]").val(); 
      newTransaction[22] = $rowChildren.find("input[id*=tPI]").val(); 
      newTransaction[23] = "E"; 

      var record = newTransaction.join(';'); 
      transactions.push(record);  
     }   
    }); 
    if (transactions.length > 0) { 
     var strTransactions = transactions.join('|'); 
     //send data to server 
     //here ajax function is called to save data. 
    } 
} 

HTML結構的錶行是這樣的

<tr class="rgRow" id="ctl00_c_PETV2_1_gB_ctl00__12"> 
     <td> 
        <a href="javascript:" id="lD" onclick="DeleteRow(this)">Delete</a> 
       </td><td> 
        <input type="text" value='385  ' id="tEmpno" /> 
        <input name="ctl00$c$PETV2_1$gB$ctl00$ctl28$hRV" type="hidden" id="ctl00_c_PETV2_1_gB_ctl00_ctl28_hRV" value="1" /> 
        <input name="ctl00$c$PETV2_1$gB$ctl00$ctl28$hRC" type="hidden" id="ctl00_c_PETV2_1_gB_ctl00_ctl28_hRC" value="0" /> 
       </td><td style="width:100px;"> 
        <input type="text" value='Barron, Pamela J.' id="tEE" readonly="readonly" /> 
       </td><td> 
        <input type="text" value='OT ' id="tPC" />      
       </td><td> 
        <input type="text" value='7.00' id="tQty" class="right" />           
        <input type="hidden" name="ctl00$c$PETV2_1$gB$ctl00$ctl28$hQty" id="ctl00_c_PETV2_1_gB_ctl00_ctl28_hQty" value="7.00000" /> 
       </td><td> 
        <input type="text" value='22.00' id="tPR" class="right" />           
        <input type="hidden" name="ctl00$c$PETV2_1$gB$ctl00$ctl28$hPR" id="ctl00_c_PETV2_1_gB_ctl00_ctl28_hPR" value="22.000000" /> 
       </td><td> 
        <input type="text" value='231.00' id="tAmt" class="right" readonly="readonly" />           
       </td><td> 
        <input type="text" value='300   ' id="tJC" /> 
       </td><td> 
        <input type="text" value='50    ' id="tL1" /> 
       </td><td> 
       <input type="text" value='23    ' id="tL2" /> 
       </td><td> 
       <input type="text" value='001   ' id="tL3" /> 
       </td><td> 
       <input type="text" value='    ' id="tL4" /> 
       </td><td> 
       <input type="text" value='1    ' id="tSF" />           
       </td><td> 
       <input type="text" value='1' id="tCG" />           
       </td><td> 
       <input type="text" value='B' id="tTF" />           
       </td><td> 
       <input type="text" value='0' id="tWk" />           
       </td><td> 
       <input type="text" value='Y' id="tAI" />           
       </td><td> 
       <input type="text" value='8810   ' id="tWC" />           
       </td><td style="width:50px;"> 
       <input type="text" value='' id="tPI" />           
       </td> 
    </tr> 

Answer 1

儘量減少你的jQuery使用find（）方法。它的性能在舊版瀏覽器上非常糟糕。也許可以使用舊的getElementsByTagName（），它甚至可以在IE6上本地實現。僞代碼：

get list of tr elements; 
for each tr element: 
    get list of input elements descending from current tr element; 
    for each input: 
     if input.id matches x 
     if input.id matches y 
     if input.id matches z 

希望這會有所幫助。

Answer 2

將重複調用替換爲find，方法是將該部分id分開，然後執行var index = $.inArray(idFragment, ['', 'tEmpno', 'hQty']);調用或類似策略以確定輸入在事務數組中的位置。

在DOM上儘可能少地搜索。如果可能，優選|=而不是*=選擇器。

或者，如果可能的話，根據需要修改jQuery中的serialize函數，並使用輸入的索引來確定它在事務數組中的位置。