搜索多字段jQuery

时间:2019-07-15 19:46:50

标签: javascript jquery

我有两种形式2被隐藏的形式。我想在单击搜索按钮时显示form2,并且该表还应该显示搜索到的字段,例如,如果我选中RB1,则该表应该在第一两周显示雇员的工作,而在第二个星期显示该雇员的工作(1f 01- > 15)(2f 16-> 31)。

          $(document).ready(function () {
            $('#check_all').on('click', function(e) {
             if($(this).is(':checked',true))  
             {
                $(".checkbox").prop('checked', true);  
             } else {  
                $(".checkbox").prop('checked',false);  
             }  
            });
             $('.checkbox').on('click',function(){
                if($('.checkbox:checked').length == $('.checkbox').length){
                    $('#check_all').prop('checked',true);
                }else{
                    $('#check_all').prop('checked',false);
                }
             });
             });
    
           $(document).ready(function () {
                $(document).ready( function() {
                $("#form2").hide();
                var now = new Date();
                var day = ("0" + now.getDate()).slice(-2);
                var month = ("0" + (now.getMonth() + 1)).slice(-2);
                var year = now.getFullYear() ;
    
                $('#year').val(year);
                $('#month').val(month);
            });
             $("#hide").click(function(){
    
              let year=$('#year').val();;
              let month=$('#month').val();;
    
               $('.year').val(year);
               $('.month').val(month);
    
               $("#form1").hide();
                $("#form2").show();
    
              });
              });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" >
    
        <div id='form1'>
            <div class="form-group">
             <label>year:</label>
              <input type="text" id="year" name="date" class="form-control">
            </div>
            <div class="form-group">
             <label>month:</label>
              <input type="text" id="month" name="date" class="form-control">
            </div>
           
              <div class="form-check form-check-inline">
                <label class="form-check-label" for="btnf1">1st fortnight</label>
                <input type="radio" class="form-check-input" id="btn1" name="btnRadio" checked>
    
                <label class="form-check-label" for="btnf2">2nd fortnight</label>
                <input type="radio" class="form-check-input" id="btn2" name="btnRadio">
              </div>
    
              <div class="form-group ">
                  <label>Chantires:</label>
                  <select class="form-control" >
                    <option>--tout--</option>
                      <option>najid</option>
                      <option>harbil</option>
                      <option>tichka</option>
                  </select>
              </div>
    
              <div class="form-group ">
                    <label>Salaries:</label>
                    <select class="form-control" >
                      <option>--tout--</option>
                        <option>najib</option>
                        <option>ali</option>
                        <option>med</option>
                    </select>
              </div>
              
              <div class="form-group col-md-offset-5 ">
                <button class="btn btn-success " id="hide">Rechercher</button>
              </div>
        </div>
    
        <div id="form2">
          <table class="table table-bordered" id="mytable">
                <thead>
                          <tr>
                            <th><input type="checkbox" id="check_all"></th>
                            <th>year</th>
                            <th>month</th>
                            <th>salaries</th>
                            <th>chantier</th>
                            <th>date</th>
                          </tr>
                        </thead>
                        <tbody>
                            <tr id="tr_">
                              <td><input type="checkbox" class="checkbox"></td>
                              <td><input type="hidden" class='year' class="form-control" /></td>
                              <td><input type="hidden" class='month' class="form-control" /></td>
                              <td>najib</td>
                              <td>harbil</td>
                              <td>01/01/2019</td>
                            </tr>
                            <tr id="tr_">
                              <td><input type="checkbox" class="checkbox"></td>
                              <td><input type="hidden" class='year' class="form-control" /></td>
                              <td><input type="hidden" class='month' class="form-control" /></td>
                              <td>ali</td>
                              <td>najd</td>
                              <td>20/01/2019</td>
                            </tr>
                        </tbody>
                <tfoot>
                     <tr>
                            <th></th>
                            <th>year</th>
                            <th>month</th>
                            <th>salaries</th>
                            <th>chantier</th>
                     </tr>
                </tfoot>
          </table>
        </div>
     </div>
        </script>

0 个答案:

没有答案