如何根據下拉選擇檢查tr是否顯示/隱藏

Question

我有三個選項的選擇標簽：重要，中等重要，不太重要； 在每個選擇中，我只想顯示表格中包含這些數據的那些元素。

另一方面，我想添加邏輯以告訴我某些tr是顯示還是隱藏（我想將顯示的材料添加到數組）

這是我的代碼，應如何實現此邏輯？

<select id="mySelector" class="styled-select slate" style="width:280px; height:35px">
           <option value='important'>აირჩიე</option>
           <option value='very important'>very important</option>
           <option value='middle important'>middle important</option>
           <option value='not so important'>not so important</option>
   </select>

    //selection code
    $(document).ready(function($) {


        $('#mySelector').change( function(){
          var selection = $(this).val();
          $('table')[selection? 'show' : 'hide']();

          if (selection) {
            $.each($('#myTable tbody tr'), function(index, item) {
              $(item)[$(item).is(':contains('+ selection  +')')? 'show' : 'hide']();
            });
          }

        });
    });

    $scope.selectAll = function(){
    document.querySelector('#myTable1').style.display = 'block';

    for (var i = 0; i < $scope.realJsonArray.length; i++) {
      var item = $scope.realJsonArray[i];
      console.log(item.id+"id======================");
       issync1(item);}
    };
    <tr  id="input1">
      <td><input type="checkbox" ng-change="sync(selected[item.id],item)"  ng-checked="isChecked(item.id)" name="checkData" ng-model="selected[item.id]" ng-false-value="undefined" /></td> 
      <td>{{item.id}}</td>
      <td>{{item.organizationNameEN}}</td>
      <td>{{item.organizationNameGE}}</td>   
      <td>{{item.priority}}</td>                   
      <td><button class="btn btn-default btn-xs" ng-click="toggle($index)"><span class="glyphicon glyphicon-eye-open"></span></button></td>
    </tr>   

ps我的表格標簽ID是myTable1

Answer 1

您可以使用$.toggleClass() ：

 $(function() { $('input').on('change', function(e) { $('p').toggleClass('hide', this.checked); }); }); 

 .hide { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label><input type='checkbox'/>Show/Hide</label> <p>This is para</p> 

函數將告訴我是否選擇了行（例如，如果選擇了行，則可以通過其他方式返回true和false）

是的，您可以使用每一行的輸入復選框進行查找。

選項1：使用復選框本身查找

 $(function() { $('button').on('click', function() { var rows = $('input[name=checkData]:checked').parents('tr'); console.log('checked rows', 0 !== rows.length); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr id='input1'> <td> <input name="checkData" type='checkbox' /> </td> </tr> <tr id='input2'> <td> <input name="checkData" type='checkbox' checked='' /> </td> </tr> <tr id='input3'> <td> <input name="checkData" type='checkbox' /> </td> </tr> </table><button>Check</button> 

Answer 2

請參考以下代碼，這可能會滿足您的要求！

  <table>
    <tr><td></td><td>id</td> <td>name</td> <td>address</td> <td>classA</td> <td>classB</td></tr>  
    <tr ng-repeat="employee in employees">
        <td><input type="checkbox" ng-model="employee.checked" ng-true-value="1" ng-false-value="0"></td>
        <td>{{employee.id}}</td>
        <td>{{employee.name}}</td>
        <td>{{employee.address}}</td>
        <td><input type="checkbox" ng-model="employee.classA"></td>
        <td><input type="checkbox" ng-model="employee.classB"></td>
    </tr>
    </table>


app.controller('MainCtrl', function($scope) {


    $scope.employees = [
    { id:"1", name: "A",              address: "A1",    classA: true,  classB: true  },
    { id:"2", name: "B",            address: "A2",    classA: false, classB: true  },
    { id:"3", name: "C",            address: "A3",    classA: true, classB: false  },
    { id:"4", name: "D",             address: "A4",   classA: false, classB: true  },
    { id:"5", name: "E",             address: "A5",   classA: false, classB: true  },
];  

$scope.getSelected = function () {
  var ar = $scope.employees.filter(
    function (value) {
      if (value.checked == 1) {
        return true;
      } else {
        return false;
      }
    }
    );
  return ar;
};

});