[英]How to check if tr is show/hide based on dropdown selection
I have selection tag with three options:important,middle important, not so important; 我有三个选项的选择标签:重要,中等重要,不太重要; and on each selection I want to show only those elements from my table which contains this data. 在每个选择中,我只想显示表格中包含这些数据的那些元素。
On the other hand I want to add logic which will tell me that certain tr is show or hide ( I want to add showed materials to array) 另一方面,我想添加逻辑以告诉我某些tr是显示还是隐藏(我想将显示的材料添加到数组)
Here is my code , how should I implement this logic? 这是我的代码,应如何实现此逻辑?
<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 my table tag id is myTable1 ps我的表格标签ID是myTable1
You can use $.toggleClass()
: 您可以使用$.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>
function which will tell me if row is selected ( if it is selected it can return true and false in other way for example) 函数将告诉我是否选择了行(例如,如果选择了行,则可以通过其他方式返回true和false)
Yes, you can lookup using input checkbox which you have for each row. 是的,您可以使用每一行的输入复选框进行查找。
Option 1: finding using checkboxes itself 选项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>
Refer following code may this would meet you requirement !! 请参考以下代码,这可能会满足您的要求!
<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;
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.