Hallo zusammen,
ich benötige mal eure Hilfe.
Ich habe hier ein kleines Script mit dem ich gerne die Daten einer Tabelle durchsuchen möchte, also mit dem ersten Suchfeld nur die Mitarbeiter
und mit dem zweiten Suchfeld nur die Raumbezeichnungen. Bisher wird leider bei jedem Suchfeld die Komplette Tabelle durchsucht.
Ich hab leider keine Ahnung wie ich einen Suchbereich in meiner Tabelle definieren kann.
Eventuell weiß ja jemand von euch wie ich die zu durchsuchende Spaltenanzahl begrenzen kann.
Grüße Ingo
Das ist der aktuelle Quellcode:
HTML
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<style>
input {margin-bottom: 5px; padding: 2px 3px; height:30px; width: 300px;}
td {padding: 4px; border: 1px #555 solid; width: 139px;
border-radius: 3px;}
.clearable{
background: #fff url(data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=) no-repeat right -10px center;
border: 1px solid #777;
padding: 3px 18px 3px 4px;
border-radius: 3px;
transition: background 0.4s;
}
.clearable.x { background-position: right 5px center; }
.clearable.onX{ cursor: pointer; }
.clearable::-ms-clear {display: none; width:0; height:0;}
body{
padding: 20px;
color:#777;
text-align:center;
}
</style>
<script id="jsbin-javascript">
jQuery(function($) {
function tog(v){return v?'addClass':'removeClass';}
$(document).on('input', '.clearable', function(){
$(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function( e ){
$(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
}).on('touchstart click', '.onX', function( ev ){
ev.preventDefault();
$(this).removeClass('x onX').val('').change();
$('#table tr').css("display","table-row");
});
});
</script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
var $rows = $('#table tr');
$('#Suchfeld-1').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
});//]]>
</script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
var $rows = $('#table tr');
$('#Suchfeld-2').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
});//]]>
</script>
</head>
<body>
<input id="Suchfeld-1" class="clearable" type="text" name="" value="" placeholder="Mitarbeiter durchsuchen" /> </br>
<input id="Suchfeld-2" class="clearable" type="text" name="" value="" placeholder="Räume durchsuchen" style="margin-top:-3px;"/>
<table style="margin-bottom:3px;" align="center" id="ohne">
<tbody><tr>
<td style="background-color: #66FFFF;">Mitarbeiter</td>
<td style="background-color: #66FFFF;">Raumbezeichnung</td>
</tr>
</tbody></table>
<table align="center" id="table">
<tbody><tr>
<td>M. Hammer</td>
<td>D-012</td>
</tr>
<tr>
<td>H. Frederiks</td>
<td>A-004</td>
</tr>
<tr>
<td>C. Fischer</td>
<td>C-034</td>
</tr>
<tr>
<td>A. Gerold</td>
<td>A-011</td>
</tr>
<tr>
<td>D. Beckmann</td>
<td>B-028</td>
</tr>
<tr>
<td>P. Heidrich</td>
<td>C-001</td>
</tr>
</tbody></table>
</body>
</html>