Последовательность добавления столбца jQuery

Я пытаюсь применить визуальные подсказки для пользователя, когда они вставляют данные в поле формы. Красный означает, что вход недействителен, в то время как зеленый указывает, что содержимое действительно. Код функционирует, хотя и запутанным образом.Последовательность добавления столбца jQuery

выпуск 1: «красное состояние» мерцает в любом случае.

Вопрос 2: Если вы вручную вставляете правильный (числовой) ввод во все поля, поодиночке, а затем в последнем поле нажимаете backspace, так что текущее поле ввода является пустой строкой, общая сумма вернется как NaN.

Я подозреваю, что это связано с методом JavaScript parseInt(), но мне это нужно, так что вычисление может быть выполнено на том, что помещается в массивы.

Конкретная причина, по которой эта настройка настроена таким образом, заключается в том, что при начальной загрузке поля уже могут быть заполнены, и если это так, я хочу, чтобы он отображал все зеленые поля и галочку как визуальную очередь, которая раздел сделан. Это также является причиной того, что весь блок кода завернут в 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() условностях, он работает нормально, но это плохая практика, предположительно.

источник

2015-07-21 Alexander Dixon

Основной проблемой является то, как setinterval используется. Он не только проверяет ввод каждые 120 мс, но и каждый раз перепроверяет события нажатия/изменения на ложном входе и, кроме того, он использует один и тот же цикл в своем цикле, тем самым реализуя каждое действие несколько раз. Еще одна особенность производительности заключается в том, что в течение этого интервала объекты jquery должны выполняться каждый раз в DOM. Например, каждый раз, когда используется $ ("input.rowA"), Dom выполняет поиск входных данных класса rowA, тогда как если они будут помещены в переменную заранее, буферизованные значения могут быть повторно использованы.

Вместо интервала лучше всего иметь одно событие change/keyup для выполнения проверок и повторного использования одного и того же кода на странице загрузки, чтобы проверить эти предварительно загруженные значения. Если, несмотря на все, вам все еще нужен этот интервал (хотя обычно триггеры будут известны, когда нужно вызвать чек), очищенный код должен быть более дружественным к ресурсам (но может быть дополнительно улучшен, если 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

источник

2015-07-22 15:02:30

Привет Me.Name это определенно кажется, что это твердое решение проблемы, отклоняется от setInterval (который я лично использую, чтобы решить все проблемы динамических сценариев). Не могли бы вы объяснить немного больше глубины на validcount ++ и почему вы не использовали массивы. Например, где все хранится? –

Это точное решение, тем более что вы также оставили возможность использовать мой setInterval(). Я очень благодарю вас и назову вас тем, кто подготовил код. Я благодарю вас за то, что вы нашли время, чтобы поглотить то, во что я ехал, а затем выпустить такое изящное решение. Поблагодарите Иисуса, так как теперь у меня есть правильный метод кодирования (объявление нескольких переменных в одной строке/число действительных проходов/и ванильный JavaScript yep nope). –

В конце концов я встал на путь setInterval, потому что были определенные события, которые не пузырились для функций, которые проверяют все, т. Е. Вырезать/вставлять контекстное меню. Если вы хотите перейти на сложность переплетения вашей текущей реализации (что совершенно нормально), чтобы включить метод setInterval(), во что бы то ни стало. –

Изменяя метод слушателя от .on() до .bind() и применяя больше событий параметров, проблема результата parseInt NaN была решена. Тем не менее, я все еще получаю мерцание красной границы. В конечном счете, однако, я считаю, что лучший результат - создать детектор пузырьков главного события, поскольку многие «плагины» браузера и стандартные функции (т. Е. Кнопка «x» браузера Internet Explorer в формальных полях) имеют различные способы обойти методы прослушивания событий jQuery.

От

$('.rowA').on("keypress change", function(evt) { 
    $(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete"); 
});

$('.rowA').bind("change keydown keypress paste cut mouseup focus", function(evt) { 
    $(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete"); 
});

источник

2015-07-22 04:04:57

Последовательность добавления столбца jQuery

ответ

Смежные вопросы