javascript - jQuery 列添加排序

Question

当用户在表单字段中插入数据时，我正在尝试为他们应用视觉提示。红色表示输入无效，而绿色表示内容有效。该代码正在运行，尽管出现了故障。

» 问题一:“红色状态”在任何事件中都会闪烁。

» 问题二:如果您在所有字段中手动插入正确的(数字)输入，一个一个输入，然后在最后一个字段中按退格键，使当前输入字段为空字符串，则总计将返回为 NaN。

我怀疑这是由于 parseInt() JavaScript 方法造成的，但我需要它以便可以对插入数组的内容执行计算。

以这种方式设置的具体原因是因为在初始加载时，字段可能已经填充，如果是这样，我希望它显示所有绿色框和复选标记作为视觉队列，那个部分已经完成了。这也是为什么整个代码块都包含在 setInterval() 中的原因，这样页面将始终扫描应显示的状态并相应地应用适当的类。

HTML:

---

员工信息(所有办公室 地点)

        </center>
    </div><span class="mrQuestionText" style=""><br>
    <br>
    17. A. Indicate the TOTAL number of full time staff your firm has in the following
    positions. DO NOT count a staff member in more than one position. (numeric values
    only, no need for thousands separator)</span>

    <table summary="&lt;hr/&gt;&lt;div style='border:1px solid #888; 
     background:#efefef;margin-top:1em;margin-left:2em;margin-right:2em;padding-top:5px;padding:1em;text-align:left; vertical-align:top; color:#000055;font-weight:normal;'&gt;&lt;center&gt;&lt;b&gt;Staff Information (for all office locations)&lt;/b&gt;&lt;/center&gt;&lt;/div&gt;&lt;br/&gt;&lt;br/&gt;17. A. Indicate the TOTAL number of full time staff your firm has in the following positions. DO NOT count a staff member in more than one position. (numeric values only, no need for thousands separator)&lt;span class='sumcol'&gt;&lt;/span&gt;" class="mrQuestionTable" style="display: inline-block;">
        <tbody>
            <tr>
                <td id="Cell.0.0"></td>
                <td id="Cell.1.0" class="mrGridQuestionText" style=""><span class="mrQuestionText" style=""><span style="clear:none; font-weight:bold; margin:0 
           auto; display:block; text-align:center;
          width:280px;">&nbsp;</span></span>
                </td>
            </tr>
            <tr>
                <td id="Cell.0.1" class="mrGridCategoryText" style=" text-Align: Left; 
 vertical-align: Middle; background-color: #D8D8D8; width: 430px; border-color: 
 black; border-width: 1px; border-left-style: Solid; border-right-style: Solid; 
           border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">1. Principals/Partners</span>
                </td>
                <td id="Cell.1.1" style=" text-Align: Center; vertical-align: Middle; 
 background-color: #D8D8D8; width: auto; border-color: black; border-width: 
 1px; border-left-style: Solid; border-right-style: Solid; border-top-style: 
           Solid; border-bottom-style: Solid;">
                    <input type="text" name="_QP1_QGRQ17A_QPrincipals__Partners_QQ17A" id="_Q33_Q0_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
                </td>
            </tr>
            <tr>
                <td id="Cell.0.2" class="mrGridCategoryText" style=" text-Align: Left; 
 vertical-align: Middle; background-color: #F8F8F8; width: 430px; border-color: 
 black; border-width: 1px; border-left-style: Solid; border-right-style: Solid; 
           border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">2. Project
          Managers/Directors</span>
                </td>
                <td id="Cell.1.2" style=" text-Align: Center; vertical-align: Middle; 
 background-color: #F8F8F8; width: auto; border-color: black; border-width: 
 1px; border-left-style: Solid; border-right-style: Solid; border-top-style: 
           Solid; border-bottom-style: Solid;">
                    <input type="text" name="_QP1_QGRQ17A_QProject__Managers_QQ17A" id="_Q33_Q1_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
                </td>
            </tr>
            <tr>
                <td id="Cell.0.3" class="mrGridCategoryText" style=" text-Align: Left; 
 vertical-align: Middle; background-color: #D8D8D8; width: 430px; border-color: 
 black; border-width: 1px; border-left-style: Solid; border-right-style: Solid; 
           border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">3. Designers</span>
                </td>
                <td id="Cell.1.3" style=" text-Align: Center; vertical-align: Middle; 
 background-color: #D8D8D8; width: auto; border-color: black; border-width: 
 1px; border-left-style: Solid; border-right-style: Solid; border-top-style: 
           Solid; border-bottom-style: Solid;">
                    <input type="text" name="_QP1_QGRQ17A_QDesigners_QQ17A" id="_Q33_Q2_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
                </td>
            </tr>
            <tr>
                <td id="Cell.0.4" class="mrGridCategoryText" style=" text-Align: Left; 
 vertical-align: Middle; background-color: #F8F8F8; width: 430px; border-color: 
 black; border-width: 1px; border-left-style: Solid; border-right-style: Solid; 
           border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">4. Other interior design
          staff</span>
                </td>
                <td id="Cell.1.4" style=" text-Align: Center; vertical-align: Middle; 
 background-color: #F8F8F8; width: auto; border-color: black; border-width: 
 1px; border-left-style: Solid; border-right-style: Solid; border-top-style: 
           Solid; border-bottom-style: Solid;">
                    <input type="text" name="_QP1_QGRQ17A_QOther__design__staff_QQ17A" id="_Q33_Q3_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
                </td>
            </tr>
            <tr>
                <td id="Cell.0.6a" class="mrGridCategoryText" style="text-align: Left; 
 vertical-align: Middle; background-color: #d8d8d8; width: 430px; border: 1px 
           Solid black;"><span class="rrSumColTotal mrQuestionTextBold" style="float:right;">A. Total # of Interior Design Staff:</span>
                </td>
                <td id="Cell.1.6a" style="text-align: Center; vertical-align: Middle; 
           background-color: #d8d8d8; width: auto; border: 1px Solid black;">
<span id="customSum" style="color: green; background-color: rgb(229, 242, 
             251);">0</span>

                    <div style="display:inline-block; clear:none; width:15px;" id="topFour">&nbsp;</div>
                </td>
            </tr>
            <tr>
                <td id="Cell.0.5" class="mrGridCategoryText" style="text-align: left; 
 vertical-align: middle; width: 430px; border: 1px solid black; 
           background-color: rgb(248, 248, 248);"><span class="mrQuestionText" style=" 
          font-size: 10pt;"><b style="float:right;">B. Total # of Non-Interior Design
          Staff:</b></span>
                </td>
                <td id="Cell.1.5" style="text-align: center; vertical-align: middle; width: 
           auto; border: 1px solid black; background-color: rgb(248, 248, 248);">
                    <input type="text" name="_QP1_QGRQ17A_QNon__Interior_QQ17A" id="_Q33_Q4_Q0" class="mrEdit" autocomplete="on" style=" width: 215px;" maxlength="10" value="">
                </td>
            </tr>
            <tr>
                <td id="Cell.0.5" class="mrGridCategoryText" style=" text-Align: Left; 
 vertical-align: Middle; background-color: #D8D8D8; width: 430px; border-color: 
 black; border-width: 1px; border-left-style: Solid; border-right-style: Solid; 
           border-top-style: Solid; border-bottom-style: Solid;"><span class="rrSumColTotal mrQuestionTextBold" style="float: right;">C. Total # of
          Employees in the Firm:</span>
                </td>
                <td id="Cell.1.5" style=" text-Align: Center; vertical-align: Middle; 
 background-color: #D8D8D8; width: auto; border-color: black; border-width: 
 1px; border-left-style: Solid; border-right-style: Solid; border-top-style: 
           Solid; border-bottom-style: Solid;"><span id="spRunningTotal_12_1" class="rrRunningTotal" data-tableordinal="12" data-columnordinal="1">0</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript + jQuery:

$('#customSum').closest('table').find('tr td:nth-child(2) input[type=text]').not(':last').addClass('rowA').css("border", "solid 1px black");

var checkValid = setInterval( function() {
    $("input.rowA").each(function(i){
        var totals = [0,0,0,0];
        var total = 0;
        if($('input.complete').length == $('input.rowA').length)
        {
            $('#topFour').html('<img src="http://www.alexldixon.com/images/checkmark.png">');
            $("input.rowA").each(function(i){
                $(this).css({"background-color": "#ffe", "border": "1px solid green", "border-left": "5px solid green"}).addClass("complete");
                items = $('input.rowA:eq(' + i + ')').val();
                if(!items.match(/^\d+$/))
                {
                    items = 0;
                    $('.rowA').on("keypress change", function(evt) {
                        $(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
                    });
                }
                items = parseInt($('input.rowA:eq(' + i + ')').val(), 10);
                totals.push(items);
            });
            total = 0; //ADD SUM LOGIC HERE: http://stackoverflow.com/questions/1230233/how-to-go-through-an-array-and-add-their-values (Tyler Carter)
            $.each(totals,function() {
                total += this;
            });
            $('#customSum').text(total);
        } else {
            $('#topFour').html('');
            totals = [0,0,0,0];
            $("input.rowA").each(function(i){
                var items = $('input.rowA:eq(' + i + ')').val();
                if(!items.match(/^\d+$/)) //Regular Expressions Source: http://www.regexlib.com/RETester.aspx?regexp_id=669
                {
                    items = 0;
                    $('.rowA').on("keypress change", function(evt) {
                        $(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
                    });
                } else {
                    items = parseInt($('input.rowA:eq(' + i + ')').val(), 10);
                    $(this).css({"background-color": "#ffe", "border": "1px solid green", "border-left": "5px solid green"}).addClass("complete");
                }
                totals.push(items);
            });
            total = 0; //ADD SUM LOGIC HERE: http://stackoverflow.com/questions/1230233/how-to-go-through-an-array-and-add-their-values (Tyler Carter)
            $.each(totals,function() {
                total += this;
            });
            $('#customSum').text(total);
        }
    });
}, 120);
$('#customSum').closest('table').find("td:contains('C.'), tr td:contains('B.')").closest('tr').toggle();

CSS:

.complete {
    border: solid 1px green;
}

.rowA {
    background-color: #CCF3FF !important;
    height: 30px;
    text-align: center;
    font-size: 17px;
    color: green;
}

jsFiddle Demo

最后，除了由 parseInt() 利用率引起的问题外，jsFiddle 说我需要将我的总计和总变量移动到可以安全访问它们的点并且这就是我的大部分问题开始的地方。也就是说，如果我在它们各自的 $.each() 语句和 if() 条件语句中重新声明这些变量，它可以正常工作，但这是不好的做法，据推测。

Answer 1

主要问题是 setinterval 的使用方式。它不仅每 120 毫秒检查一次输入，它还会在每次错误输入时重新绑定(bind)按键/更改事件，并且最重要的是它在循环中使用相同的循环，从而多次执行每个操作。另一个性能问题是，在该间隔内，每次都必须在 DOM 中搜索 jquery 对象。例如，每次使用 $("input.rowA") 时，都会在 Dom 中搜索 rowA 类的输入，而如果事先将它们放入变量中，则可以重用缓冲值。

最好使用单个更改/键盘事件来进行检查，并在页面加载时重复使用相同的代码来检查那些预加载的值，而不是时间间隔。如果尽管如此，您仍然需要该间隔(尽管通常在必须调用检查时会知道触发器)，清理后的代码应该证明对资源更友好(但如果 setinterval 确实非常必要，则可以进一步改进)

var $inputBoxes =  $('#customSum').closest('table').find('tr td:nth-child(2) input[type=text]').not(':last');
$inputBoxes.addClass('rowA');
//or in case the former code was just a test scenario, use var $inputBoxes = $('input.rowA');

var $custSum = $('#customSum'), $chk = $('#topFour').html('<img src="http://www.alexldixon.com/images/checkmark.png">').hide(); //add the check once, but hidden (can be done in hard coded in html instead)

$inputBoxes.on("keyup change propertychange input paste", function(e) {   
    SetInput(this);      
    CheckInputs();
});

function SetInput(inputBox){
    var $input = $(inputBox), val = $input.val(), isvalid = val.length > 0 && isFinite(val) && val > 0;
    $input.data('valid', isvalid).data('number', isvalid ? parseInt(val) : null); //instead of an array, reuse the jquery elements    
    $input.toggleClass('complete', isvalid).toggleClass('error', val.length  > 0 && !isvalid);  
}

function SetAllInputs(){
    $inputBoxes.each(function(){SetInput(this);});
    CheckInputs();
}

function CheckInputs(){
    var total = 0, validcount = 0;    
    $inputBoxes.each(function(){
        if($(this).data('valid')){
            validcount++;        
            total+= $(this).data('number');
        }
    });
    $custSum.text(total);
    $chk.toggle(validcount === $inputBoxes.length); //show the 'check' image if all input is valid
}


 SetAllInputs(); //call on page load, in case of pre entered values.

Fiddle