如何檢查所有的值是空的還是不用jquery

Question

我需要檢查所有的值是空的還是不在裏面child tr標籤並更新parent tr tag。我的表格式看起來象下面這樣：

按畫面，我需要更新parent tr tag狀態基於child tr標籤assetID列的列Assigned。

如果child assetID column values中的任何一個爲空，則需要將Amber color添加到parent assigned column。

如果所有child assetID column values空的，我需要添加Red color to parent tr 如果全部填滿，然後green color到parent tr tag。

$(document).ready(function() { 
 
    var val = className = number =''; 
 
    $('.assignedAssetID').each(function() { 
 

 
     val = $(this).val(); 
 
     if(val != '') 
 
     { 
 
      $(this).closest('tr').find("td:eq(6) .assig_noti").addClass('assign_complete'); 
 
     }else 
 
     { 
 

 
     $(this).closest('tr').find("td:eq(6) .assig_noti").addClass('not_assign'); 
 
     } 
 

 
     className = $(this).closest('table').attr('class').split(' ')[0]; 
 
     number = parseFloat(className.match(/-*[0-9]+/)); 
 

 
     $('.ParentBundle'+number).each(function() { 
 

 
      if(val != '') 
 
      { 
 
       $(this).closest('tr').find("td:eq(8) .assig_noti").addClass('assign_complete'); 
 
      }else 
 
      { 
 

 
      $(this).closest('tr').find("td:eq(8) .assig_noti").addClass('not_assign'); 
 
      } 
 

 
     }); 
 

 
    }); 
 

 

 

 
});

<script 
 
    src="https://code.jquery.com/jquery-1.12.4.min.js" 
 
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" 
 
    crossorigin="anonymous"></script> 
 
<table> 
 
<tr class="ParentBundle21393114881"> 
 
    <td style="display: none"> 
 
    </td> 
 
    <td> 
 
     <p class="mar">1XPaver 2XRoller</p> 
 
    </td> 
 
    <td> 
 
     <input type="text" value="25/07/2017" name="est_start_date[]" placeholder="Date Start" class="StartDate form-control date"> 
 
    </td> 
 
    <td> 
 
     <input type="text" value="27/07/2017" name="est_off_date[]" placeholder="Date Off" class="OffDate form-control date"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="week_count[]" value="3" placeholder="" class="WeekDayCount21393114881 form-control wdCount"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="nonweek_count[]" value="0" placeholder="" class="WeekEndCount21393114881 form-control weCount"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="row_total[]" id="RowTotal21393114881" value="1140.00" readonly="" class="RowTotal form-control"> 
 
    </td> 
 
    <td class="ExtraCheckbox_main"> 
 
     <input type="checkbox" name="extra[]" class="js-switch" style="position: absolute; opacity: 0;"> 
 
    </td> 
 
    <td> 
 
     <div class="assig_noti"></div> 
 
    </td> 
 
    <td> 
 
     <div class="btn-group pull-right"> 
 
      <button type="button" class="btn btn-default BundleExpand"><i class="fa fa-list"></i></button> 
 
      <button data-toggle="modal" data-target="#commentModal" type="button" class="btn btn-default"><i class="fa ficon fa-comment-o" aria-hidden="true"></i></button> 
 
      <button type="button" data-code="B21393114881" data-id="1" data-type="bundle" class="btn btn-default DeleteBundleRow"><i class="fa fa-trash-o"></i></button> 
 
     </div> 
 
    </td> 
 
</tr> 
 
<tr class="ChildBundle21393114881" style="background: rgb(249, 249, 249) !important;"> 
 
    <td colspan="9" style="padding: 0!important;"> 
 
     <table cellpadding="5" border="0" class="ChildTable21393114881 child_tbl table" width="100%" style="background: #f9f9f9!important;"> 
 
      <thead> 
 
       <tr> 
 
        <th width="20%"></th> 
 
        <th width="20%"> 
 
         ASSET ID 
 
        </th> 
 
        <th width="16%" colspan="2">RATES</th> 
 
        <th width="10%"> 
 
        </th> 
 
        <th width="5%"> 
 
        </th> 
 
        <th width="14%"> 
 
        </th> 
 
        <th width="15%"> 
 
        </th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
        <td>                                 Paver 
 
       </td> 
 
       <td> 
 
        <select style="width:100%" name="assigned_asset[]" class="form-control select2_demo_2 assignedAssetID" tabindex="-1" aria-hidden="true"> 
 
         <option value="">--Not Assigned --</option> 
 
         <option value="PV01">PV01</option> 
 
         </select> 
 
        </td> 
 
        <td><input type="text" name="week_rate[]" value="150.00" placeholder="" class="Week form-control"></td> 
 
        <td><input type="text" name="nonweek_rate[]" value="200.00" placeholder="" class="NonWeek form-control"></td> 
 
        <td><input type="text" value="450.00" name="rate[]" readonly="" placeholder="" id="ChildRowTotal62" class="ChildRowTotal form-control"></td> 
 
        <td> 
 
        </td> 
 
        <td> 
 
         <div class="assig_noti not_assign"></div> 
 
        </td> 
 
        <td width="15%" style="text-align: right; padding-right: 43px;"><input type="hidden" id="comment62" name="comments[]" class="form-control ctext"> 
 
        <button data-toggle="modal" data-target="#commentModal" type="button" class="Comment btn btn-default"><i class="fa ficon fa-comment-o" id="fa62" aria-hidden="true"></i></button> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td>                                    Small Roller 
 
      </td> 
 
      <td> 
 
       <select style="width:100%" name="assigned_asset[]" class="form-control select2_demo_2 assignedAssetID " tabindex="-1" aria-hidden="true"> 
 
        <option value="">--Not Assigned --</option> 
 
        <option value="RL01" selected="">RL01</option> 
 
        <option value="RL02">RL02</option> 
 
        <option value="RL03">RL03</option> 
 
        <option value="RL04">RL04</option> 
 
        <option value="RL05">RL05</option> 
 
        </select> 
 
       </td> 
 
       <td><input type="text" name="week_rate[]" value="110.00" placeholder="" class="Week form-control"></td> 
 
       <td><input type="text" name="nonweek_rate[]" value="160.00" placeholder="" class="NonWeek form-control"></td> 
 
       <td><input type="text" value="330.00" name="rate[]" readonly="" placeholder="" id="ChildRowTotal71" class="ChildRowTotal form-control"></td> 
 
       <td> 
 
       </td> 
 
       <td> 
 
        <div class="assig_noti"></div> 
 
       </td> 
 
       <td width="15%" style="text-align: right; padding-right: 43px;"><input type="hidden" id="comment71" name="comments[]" class="form-control ctext"> 
 
       <button data-toggle="modal" data-target="#commentModal" type="button" class="Comment btn btn-default"><i class="fa ficon fa-comment-o" id="fa71" aria-hidden="true"></i></button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      Medium Roller 
 
     </td> 
 
     <td> 
 
      <select style="width:100%" name="assigned_asset[]" class="form-control select2_demo_2 assignedAssetID " tabindex="-1" aria-hidden="true"> 
 
       <option value="">--Not Assigned --</option> 
 
       <option value="MRL01">MRL01</option> 
 
       <option value="MRL02">MRL02</option> 
 
       </select> 
 
      </td> 
 
      <td><input type="text" name="week_rate[]" value="120.00" placeholder="" class="Week form-control"></td> 
 
      <td><input type="text" name="nonweek_rate[]" value="220.00" placeholder="" class="NonWeek form-control"></td> 
 
      <td><input type="text" value="360.00" name="rate[]" readonly="" placeholder="" id="ChildRowTotal84" class="ChildRowTotal form-control"></td> 
 
      <td> 
 
      </td> 
 
      <td> 
 
       <div class="assig_noti"></div> 
 
      </td> 
 
      <td width="15%" style="text-align: right; padding-right: 43px;"><input type="hidden" id="comment84" name="comments[]" class="form-control ctext"> 
 
      <button data-toggle="modal" data-target="#commentModal" type="button" class="Comment btn btn-default"><i class="fa ficon fa-comment-o" id="fa84" aria-hidden="true"></i></button> 
 
     </td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 
</td> 
 
</tr> 
 
</table>

但我不是讓我如何檢查assetID孩子TR欄，以滿足家長TR的狀態。

任何建議請。

Answer 1

code 
---- 

<table id="tbl"> 
<tr> 
    <td><input type="text" id="tb1"></td> 
    <td><input type="text" id="tb2"></td> 
    <td> 
<select class="select" onchange="checkIndex()"> 
     <option value="1">select</option> 
     <option value="2">V2</option> 
     <option value="3">V3</option> 
    </select></td> 
    <td><h1 id="status"> 
    status 
    </h1></td> 
</tr> 
</table> 
    <script>function checkIndex(){ 
    var boolTxtBox=false; 
     var selectBoxselectedIndex=$(".select")[0].selectedIndex; 
//alert(selectBoxselectedIndex); 
     if(selectBoxselectedIndex>0){ 
      // set the background to green 

      var txtboxes =$('#tbl input:text'); 
      $.each(txtboxes,function(i,v){ 
      if($(v).val().length>0){ 
        boolTxtBox=true; 
       } 
       else{ 
        boolTxtBox=false; 
       } 
      }); 
      if(boolTxtBox==true){ 
       $('#status').css({'color':'green'}); 
      }else{ 
       $('#status').css({'color':'red'}); 
      } 
     } 
     else{ 
      //set the background to red 
      $('#status').css({'color':'red'}); 
     } 
    }</script> 

工作演示jsFiddle working demo