title: Show error on specific input field in html table td using jQuery
body: <p>I am trying to highlight the input field which is in html table td. I am looping the html table but unable to highlight the input field if quantity is 0 in input field. what i have tried is below.</p>
  
  <pre><code>&lt;div id="rootwizard"&gt;
    &lt;div class="navbar"&gt;
      &lt;div class="navbar-inner"&gt;
        &lt;div class="container"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#details" data-toggle="tab"&gt;details&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#captain" data-toggle="tab"&gt;captain&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="tab-content"&gt;
      &lt;div class="tab-pane" id="details"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-12"&gt;
            &lt;h4 class="info-text"&gt;
              Let's start with the basic details.
            &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="form-horizontal"&gt;
            &lt;div class="form-group"&gt;
              &lt;div class="col-md-12"&gt;
                &lt;div class="persons"&gt;
                  &lt;table class="table table-condensed table-hover" id="tblPurchaseOrders"&gt;
                    &lt;tr&gt;
                      &lt;th&gt;
                        Product Code
                      &lt;/th&gt;
                      &lt;th&gt;
                        SKU
                      &lt;/th&gt;
                      &lt;th&gt;
                        Product Name
                      &lt;/th&gt;
                      &lt;th&gt;
                        Quantity
                      &lt;/th&gt;
                    &lt;/tr&gt;
  
                    &lt;tr&gt;
                      &lt;td&gt;
                        &lt;input type="text" name="ProductCode" value="A" class="form-control" /&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                        &lt;input type="text" name="SKU" value="A1" class="form-control" /&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                        &lt;input type="text" name="Name1" value="A1" class="form-control" /&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                        &lt;input type="text" id="Quantity" value="0" class="form-control" /&gt;
                      &lt;/td&gt;
                    &lt;/tr&gt;
  
  
                    &lt;tr&gt;
                      &lt;td&gt;
                        &lt;input type="text" name="ProductCode" value="B" class="form-control" /&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                        &lt;input type="text" name="SKU" value="B1" class="form-control" /&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                        &lt;input type="text" name="Name1" value="B1" class="form-control" /&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                        &lt;input type="text" id="Quantity" value="1" class="form-control" /&gt;
                      &lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/table&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;hr /&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tab-pane" id="captain"&gt;
        &lt;div class="row"&gt;
          &lt;div class="form-group"&gt;
            &lt;div class="col-md-12"&gt;
              &lt;table class="table table-condensed table-hover" id="tbOrderDetail"&gt;
                &lt;tr&gt;
                  &lt;th&gt;
                    Product Code
                  &lt;/th&gt;
                  &lt;th&gt;
                    SKU
                  &lt;/th&gt;
                  &lt;th&gt;
                    Product Name
                  &lt;/th&gt;
                  &lt;th&gt;
                    Quantity
                  &lt;/th&gt;
                &lt;/tr&gt;
              &lt;/table&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;ul class="pager wizard"&gt;
        &lt;li class="previous first" style="display:none;"&gt;&lt;a href="#"&gt;First&lt;/a&gt;&lt;/li&gt;
        &lt;li class="previous"&gt;&lt;a href="#"&gt;Previous&lt;/a&gt;&lt;/li&gt;
        &lt;li class="next last" style="display:none;"&gt;&lt;a href="#"&gt;Last&lt;/a&gt;&lt;/li&gt;
        &lt;li class="next"&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="tab-content"&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Below is my jquery code where i am looping the html table and want to highlight the input field which is in html table td.</p>
  
  <pre><code>$(document).ready(function() {
    $('#rootwizard').bootstrapWizard({
      onTabShow: function(tab, navigation, index) {
  
        if (index == 1) {
          $('#tblPurchaseOrders').find('tr:has(td)').each(function() {
            if (parseInt(($(this).find('#Quantity')).val()) == 0)
            {
            //show error
             }
          });        
        }
  
      }
    });
   });
  </code></pre>