3
Suchfeld zurücksetzen
Hallo zusammen,
ich hab mal eine kurze Frage an euch.
Und zwar benutze ich folgendes Script zum durchsuchen einer Tabelle.
Wenn man ins Suchfeld etwas eingibt erscheint rechts am Rand ein
Button zum löschen des Suchfeldes. Wenn man auf diesen Button klickt
wird auch das Suchfeld wie gewünscht gelöscht, aber leider bekomme ich es
nicht so hin das auch die Tabelle wieder zurückgesetzt wird, diese bleibt leider
bei der letzten Suche stehen, obwohl das Eingabefeld ja jetzt wieder leer ist.
Hat von euch vielleicht jemand einen Tipp wie ich das korrigieren kann ?
Mit Freundlichen Grüßen
Tobias
ich hab mal eine kurze Frage an euch.
Und zwar benutze ich folgendes Script zum durchsuchen einer Tabelle.
Wenn man ins Suchfeld etwas eingibt erscheint rechts am Rand ein
Button zum löschen des Suchfeldes. Wenn man auf diesen Button klickt
wird auch das Suchfeld wie gewünscht gelöscht, aber leider bekomme ich es
nicht so hin das auch die Tabelle wieder zurückgesetzt wird, diese bleibt leider
bei der letzten Suche stehen, obwohl das Eingabefeld ja jetzt wieder leer ist.
Hat von euch vielleicht jemand einen Tipp wie ich das korrigieren kann ?
Mit Freundlichen Grüßen
Tobias
<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: 222px;}
td {padding: 4px; border: 1px #555 solid; width: 100px;
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();
});
});
</script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
var $rows = $('#table tr');
$('#search').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="search" class="clearable" type="text" name="" value="" placeholder="Suchbegriff..." />
<table align="center" id="table">
<tbody><tr>
<td>Tom</td>
<td>Cruise</td>
</tr>
<tr>
<td>Brad</td>
<td>Pitt</td>
</tr>
<tr>
<td>Angelina</td>
<td>Jolie</td>
</tr>
<tr>
<td>George</td>
<td>Clooney</td>
</tr>
<tr>
<td>Matt</td>
<td>Damon</td>
</tr>
<tr>
<td>Katie</td>
<td>Holmes</td>
</tr>
</tbody></table>
</body>
</html>
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 296519
Url: https://administrator.de/contentid/296519
Printed on: April 19, 2024 at 15:04 o'clock
3 Comments
Latest comment
Hallo timeoff,
habe auf einer meiner Seiten den folgenden Button eingebaut, um die Suche wieder auf null (Leer) zurückzusetzen:
Hier ein Beispiel von W3Schools.
Gruß, Sascha
habe auf einer meiner Seiten den folgenden Button eingebaut, um die Suche wieder auf null (Leer) zurückzusetzen:
<input type="image" src="img/refresh.png" name="refresh" alt="Refresh" onclick="history.go(0)"> Hier ein Beispiel von W3Schools.
Gruß, Sascha
Moin.
Hinter Zeile 42 noch folgende Zeile einfügen, und Brad und Angie geben sich die Ehre
:
Gruß jodel32
Hinter Zeile 42 noch folgende Zeile einfügen, und Brad und Angie geben sich die Ehre
:$('#table tr').css("display","table-row");
Danke dir jodel32
jetzt klappts
jetzt klappts
