javascript - 循环遍历表行的性能问题

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 上也是 native 实现的。伪代码:

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

希望这有帮助。