<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// убираем дубликаты!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var assigneeMap = {};
$('#tasks>tbody>tr>td:nth-child(3)').each(function(){
assigneeMap[$(this).text()] = $(this).text();
});
var $tooltip = $('<div id="tooltip" />')
.appendTo('body')
.hide();
$.each(assigneeMap, function(index, word){
$('<div class="filter"/>')
.text(word)
.appendTo($tooltip)
.click(function(event){
$this = $(this);
filterRows($this.text());
$tooltip.hide();
});
});
$('#tasks>thead>tr>th:nth-child(3)').click(
function(event) {
//наведение
positionTooltip.call(this, event);
},
function(event) {
//вывод инфы
}
);
var positionTooltip = function(event){
$tooltip.css({top:event.pageY+20,
left:event.pageX,
position:'absolute',
backgroundColor:'blue'
}).show();
};
var filterRows = function(word){
$('#tasks>tbody>tr')
.show()
.find('td:nth-child(3)')
.not(':contains("'+word+'")')
.parent()
.hide();
};
});
$(function(){
// убираем дубликаты!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var assigneeMap = {};
$('#tasks>tbody>tr>td:nth-child(2)').each(function(){
assigneeMap[$(this).text()] = $(this).text();
});
var $tooltip = $('<div id="tooltip" />')
.appendTo('body')
.hide();
$.each(assigneeMap, function(index, word){
$('<div class="filter"/>')
.text(word)
.appendTo($tooltip)
.click(function(event){
$this = $(this);
filterRows($this.text());
$tooltip.hide();
});
});
$('#tasks>thead>tr>th:nth-child(2)').click(
function(event) {
//наведение
positionTooltip.call(this, event);
},
function(event) {
//вывод инфы
}
);
var positionTooltip = function(event){
$tooltip.css({top:event.pageY+20,
left:event.pageX,
position:'absolute',
backgroundColor:'blue'
}).show();
};
var filterRows = function(word){
$('#tasks>tbody>tr')
.show()
.find('td:nth-child(2)')
.not(':contains("'+word+'")')
.parent()
.hide();
};
});
$(function(){
// убираем дубликаты!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var assigneeMap = {};
$('#tasks>tbody>tr>td:nth-child(1)').each(function(){
assigneeMap[$(this).text()] = $(this).text();
});
var $tooltip = $('<div id="tooltip" />')
.appendTo('body')
.hide();
$.each(assigneeMap, function(index, word){
$('<div class="filter"/>')
.text(word)
.appendTo($tooltip)
.click(function(event){
$this = $(this);
filterRows($this.text());
$tooltip.hide();
});
});
$('#tasks>thead>tr>th:nth-child(1)').click(
function(event) {
//наведение
positionTooltip.call(this, event);
},
function(event) {
//вывод инфы
}
);
var positionTooltip = function(event){
$tooltip.css({top:event.pageY+20,
left:event.pageX,
position:'absolute',
backgroundColor:'blue'
}).show();
};
var filterRows = function(word){
$('#tasks>tbody>tr')
.show()
.find('td:nth-child(1)')
.not(':contains("'+word+'")')
.parent()
.hide();
};
});
</script>
<table id="tasks" width="800" border="1">
<thead>
<tr>
<th scope="col" width="250">Фильтр1</th>
<th scope="col" width="250">Фильтр2</th>
<th scope="col" >Фильтр3</th>
</tr>
<thead>
<tbody>
<tr>
<td>aa</td>
<td>11</td>
<td>1</td>
</tr>
<tr>
<td>aa</td>
<td>22</td>
<td>2</td>
</tr>
<tr>
<td>bb</td>
<td>11</td>
<td>2</td>
</tr>
<tr>
<td>bb</td>
<td>11</td>
<td>2</td>
</tr>
<tr>
<td>bb</td>
<td>33</td>
<td>1</td>
</tr>
<tr>
<td>cc</td>
<td>22</td>
<td>1</td>
</tr>
<tr>
<td>cc</td>
<td>22</td>
<td>1</td>
</tr>
<tr>
<td>cc</td>
<td>33</td>
<td>2</td>
</tr>
</tbody>
</table>
</body>
</html>
может кто знает Jquery и готов немного помочь разобратся?:)
Нужно проверить выбраны ли какие то фильтры и если выбраны то собрать фильтр из тех позиций что остались:)
☆ A M B ☆
может ещё кому пригодится 