如何获取标头正在使用表的响应式粘性标头?

时间:2017-06-14 08:01:19

标签: jquery css



$(window).scroll(function() {
    if ($(this).scrollTop() > 150){  
        $('#header').addClass("sticky");
    }
    else{
        $('#header').removeClass("sticky");
    }
});

#header
    {
        text-align: center;
        font-size: 16px;
        line-height: 108px;
        height: 108px;
        background: #335C7D;
        color: #fff;
        font-family: 'PT Sans', sans-serif;
        
        // set animation
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
        display:none;
    }

    #header.sticky 
    {
        position: fixed;
        font-size: 12px;
        line-height: 20px;
        height: 48px; 
        background: #827f7b;
        text-align: left;
        z-index: 99999;
        display: inherit;
		width: 100%;
		top:0;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-responsive" id="tab">

  <tr id="example" class="disappear">
    <td width="200px" id="text" style="font-weight: bold">content</td>
    <td width="40px"><label>Never</br><input type="radio" name="ExpF" disabled /></label></td>
    <td width="40px"><label>Rarely</br><input type="radio" name="ExpF" disabled checked="checked"></label></td>
    <td width="40px"><label>Occasionally</br><input type="radio" name="ExpF" disabled></label></td>
    <td width="40px"><label>Often</br><input type="radio" name="ExpF" disabled></label></td>
    <td width="30px"><label>Constantly</br><input type="radio" name="ExpF" disabled></label></td>
    <td width="50px" bgcolor="Gainsboro"><label>Negligible</br><input type="radio" name="ExpI" disabled></label></td>
    <td width="50px" bgcolor="Gainsboro"><label>Mild</br><input type="radio" name="ExpI" disabled></label></td>
    <td width="50px" bgcolor="Gainsboro"><label>Moderate</br><input type="radio" name="ExpI" checked="checked" disabled></label></td>
    <td width="50px" bgcolor="Gainsboro"><label>Severe</br><input type="radio" name="ExpI" disabled></label></td>
    <td width="120px" bgcolor="Gainsboro"><label>Extremely severe</br><input type="radio" name="ExpI" disabled></label></td>
    <td width="30px"></td>
    <td width="30px" bgcolor="Gainsboro"></td>
  </tr>


  <tr id="header">
    <td width="230px"></td>
    <td width="40px">Never</td>
    <td width="40px">Rarely</td>
    <td width="40px">Occasionally</td>
    <td width="40px">Often</td>
    <td width="30px">Constantly</td>
    <td width="50px">Negligible</td>
    <td width="50px">Mild</td>
    <td width="50px">Moderate</td>
    <td width="50px">Severe</td>
    <td width="140px">Extremely severe</td>
    <td width="20px"></td>
    <td width="30px"></td>
  </tr>

  <tr id="empty">
    <td width="200px" id="text"></td>
    <td width="40px"></td>
    <td width="40px"></td>
    <td width="40px"></td>
    <td width="40px"></td>
    <td width="30px"></td>
    <td width="50px" bgcolor="Gainsboro"></td>
    <td width="50px" bgcolor="Gainsboro"></td>
    <td width="50px" bgcolor="Gainsboro"></td>
    <td width="50px" bgcolor="Gainsboro"></td>
    <td width="120px" bgcolor="Gainsboro"></td>
    <td width="30px">F</td>
    <td width="30px" bgcolor="Gainsboro">I</td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
 
 <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="0"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="1"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="2"></label></td>
    <td width="40px"><label><input type="radio" name="Fr1" class="allrb Fr" value="3"></label></td>
    <td width="30px"><label><input type="radio" name="Fr1" class="allrb Fr" value="4"></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="0" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="1" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="2" ></label></td>
    <td width="50px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="3" ></label></td>
    <td width="120px" bgcolor="Gainsboro"><label><input type="radio" name="Ir1" class="allrb Ir" value="4" ></label></td>
    <td width="30px"><input type="text" class="numFr" name="numFr1" id="numFr1" disabled></td>
    <td width="30px" bgcolor="Gainsboro"><input type="text" class="numIr" name="numIr1" id="numIr1" disabled></td>
  </tr>
  
  </table>
&#13;
&#13;
&#13;

当用户滚动评级指南的整行时,我很想看到一个粘性标题(用户很容易看到评级指南,而不是所有空的收音机盒,这对用户来说会很麻烦。)所以我写了一个表格行名称为#header,它最初是隐藏的,并且会在中断高度值(150px)时出现。

我的问题是:

1)当我调整浏览器大小时,如何确保所有对齐都正确?因为如果我调整浏览器大小,评级指南的对齐将不正确。

2)如果使用方法检查用户是否已直接滑过#header行而不是直接设置中断高度值(150px),如何将#class添加到我的#header行,这是因为如果我调整浏览器大小,它会更早出现而不是正确的位置。

这是jsfiddle。 https://jsfiddle.net/k77vhf14/

感谢。

1 个答案:

答案 0 :(得分:1)

我根据您的要求制作了代码

问题在于,当#header具有position:fixed时,td所具有的宽度会被考虑,而td宽度来自#example时,它们不会被采用考虑到

对于未来,您应该知道td { width:number px }不起作用,您需要使用min-width:

无论如何,我使用#example td

#header td的宽度添加到相应的for loop

还根据#header行高

在滚动时添加了动态条件

希望这对你有好处

请参阅代码段或&gt; Fiddle

var headHeight = $("#header").height(),
  tdlength = $("#example td").length
for (i = 0; i < tdlength; i++) {
  var tdWidth = $("#example td:eq(" + i + ")").width()
  $("#header td:eq(" + i + ")").css({
    "min-width": tdWidth,
    "width": tdWidth
  })
}

$(window).on("scroll", function() {
  if ($(this).scrollTop() > headHeight) {
    $('#header').addClass("sticky");
  } else {
    $('#header').removeClass("sticky");
  }
});
#header {
  text-align: center;
  font-size: 12px;
  line-height: 108px;
  height: 108px;
  background: #335C7D;
  color: #fff;
  font-family: 'PT Sans', sans-serif;
  display: none;
  // set animation
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
}
label {
  font-size: 15px;
}
td {
  font-size: 14px;
}
#header td:first-child {
  visibility: hidden
}
#header.sticky td:not(:first-child) {
  font-size: 12px;
}
#header.sticky {
  font-size: 12px;
  line-height: 20px;
  height: 48px;
  background: #827f7b;
  text-align: center;
  z-index: 99999;
  display: table-row;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mata">

</div>
<table class="table table-hover table-responsive" id="tab">

  <tr id="example" class="disappear">
    <td width="200px" id="text" style="font-weight: bold">content</td>
    <td width="40px">
      <label>Never</br>
        <input type="radio" name="ExpF" disabled />
      </label>
    </td>
    <td width="40px">
      <label>Rarely</br>
        <input type="radio" name="ExpF" disabled checked="checked">
      </label>
    </td>
    <td width="40px">
      <label>Occasionally</br>
        <input type="radio" name="ExpF" disabled>
      </label>
    </td>
    <td width="40px">
      <label>Often</br>
        <input type="radio" name="ExpF" disabled>
      </label>
    </td>
    <td width="30px">
      <label>Constantly</br>
        <input type="radio" name="ExpF" disabled>
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>Negligible</br>
        <input type="radio" name="ExpI" disabled>
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>Mild</br>
        <input type="radio" name="ExpI" disabled>
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>Moderate</br>
        <input type="radio" name="ExpI" checked="checked" disabled>
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>Severe</br>
        <input type="radio" name="ExpI" disabled>
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>Extremely severe</br>
        <input type="radio" name="ExpI" disabled>
      </label>
    </td>
    <td width="30px"></td>
    <td width="30px" bgcolor="Gainsboro"></td>
  </tr>


  <tr id="header">
    <td width="">Content</td>
    <td width="40px">Never</td>
    <td width="40px">Rarely</td>
    <td width="40px">Occasionally</td>
    <td width="40px">Often</td>
    <td width="30px">Constantly</td>
    <td width="50px">Negligible</td>
    <td width="50px">Mild</td>
    <td width="50px">Moderate</td>
    <td width="50px">Severe</td>
    <td width="40px">Extremely severe</td>
    <td width="20px"></td>
    <td width="30px"></td>
  </tr>

  <tr id="empty">
    <td width="200px" id="text"></td>
    <td width="40px"></td>
    <td width="40px"></td>
    <td width="40px"></td>
    <td width="40px"></td>
    <td width="30px"></td>
    <td width="50px" bgcolor="Gainsboro"></td>
    <td width="50px" bgcolor="Gainsboro"></td>
    <td width="50px" bgcolor="Gainsboro"></td>
    <td width="50px" bgcolor="Gainsboro"></td>
    <td width="120px" bgcolor="Gainsboro"></td>
    <td width="30px">F</td>
    <td width="30px" bgcolor="Gainsboro">I</td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  <tr id="alertr1" name="v">
    <td width="200px" id="text">Content</td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="0">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="1">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="2">
      </label>
    </td>
    <td width="40px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="3">
      </label>
    </td>
    <td width="30px">
      <label>
        <input type="radio" name="Fr1" class="allrb Fr" value="4">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="0">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="1">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="2">
      </label>
    </td>
    <td width="50px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="3">
      </label>
    </td>
    <td width="120px" bgcolor="Gainsboro">
      <label>
        <input type="radio" name="Ir1" class="allrb Ir" value="4">
      </label>
    </td>
    <td width="30px">
      <input type="text" class="numFr" name="numFr1" id="numFr1" disabled>
    </td>
    <td width="30px" bgcolor="Gainsboro">
      <input type="text" class="numIr" name="numIr1" id="numIr1" disabled>
    </td>
  </tr>

  






</table>