richard5000
Gebruiker
- Lid geworden
- 24 mrt 2012
- Berichten
- 161
Hoi,
IK heb een script met zoekfunctie erin en als iemand in het zoekveld iets intoetst wat niet in de tabel staat, dan verbergt hij de rijen, op zich niets mis mee, maar dan zie je alleen maar de headers van de tabel.
Ik zou graag willen dat als iemand iets intoetst en hij geen rijen laat zien er een melding komt van zoiets als "Sorry dat wat u zoekt komt niet voor...." eneventueel daaronder een button met reset, of ga terug, in ieder geval iets waarmee hij de tabel weer volledig laat zien.
Ik weet niet waar ik dit in de PHp moet plaatsen, kan iemand mij hiermee helpen...?
Hieronder het script:
IK heb een script met zoekfunctie erin en als iemand in het zoekveld iets intoetst wat niet in de tabel staat, dan verbergt hij de rijen, op zich niets mis mee, maar dan zie je alleen maar de headers van de tabel.
Ik zou graag willen dat als iemand iets intoetst en hij geen rijen laat zien er een melding komt van zoiets als "Sorry dat wat u zoekt komt niet voor...." eneventueel daaronder een button met reset, of ga terug, in ieder geval iets waarmee hij de tabel weer volledig laat zien.
Ik weet niet waar ik dit in de PHp moet plaatsen, kan iemand mij hiermee helpen...?
Hieronder het script:
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>TJou Pagina naam</title>
<style type="text/css">
/*----------Text Styles----------*/
.ws12 {font-size: 16px;}
.wpmd {font-size: 13px;font-family: 'Arial';font-style: normal;font-weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
margin-top: 1px;
margin-bottom: 0px;
}
TABLE
{ border- collapse: separate; border-spacing: 10px 3px;} // Eerste is voor ruimte tabel links, tweede is voor ruimte tussen rijen
{ text-allign: center }
</style>
<script language="javascript" type="text/javascript">
//define the table search as an object, which can implement both functions and properties
window.tableSearch = {};
//initialize the search, setup the current object
tableSearch.init = function() {
//define the properties I want on the tableSearch object
this.Rows = document.getElementById('data').getElementsByTagName('TR');
this.RowsLength = tableSearch.Rows.length;
this.RowsText = [];
//loop through the table and add the data to
for (var i = 0; i < tableSearch.RowsLength; i++) {
this.RowsText[i] = (tableSearch.Rows[i].innerText) ? tableSearch.Rows[i].innerText.toUpperCase() : tableSearch.Rows[i].textContent.toUpperCase();
}
}
//onlys shows the relevant rows as determined by the search string
tableSearch.runSearch = function() {
//get the search term
this.Term = document.getElementById('textBoxSearch').value.toUpperCase();
//loop through the rows and hide rows that do not match the search query
for (var i = 0, row; row = this.Rows[i], rowText = this.RowsText[i]; i++) {
row.style.display = ((rowText.indexOf(this.Term) != -1) || this.Term === '') ? '' : 'none';
}
}
//runs the search
tableSearch.search = function(e) {
//checks if the user pressed the enter key, and if they did then run the search
var keycode;
if (window.event) { keycode = window.event.keyCode; }
else if (e) { keycode = e.which; }
else { return false; }
if (keycode == 13) {
tableSearch.runSearch();
}
else { return false; }
}
</script>
</head>
<body onload="tableSearch.init();">
<table border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td>
<input type="text" size="25" maxlength="1000" value="" id="textBoxSearch" onkeyup="tableSearch.search(event);" />
<input type="button" value="Search" onclick="tableSearch.runSearch();" />
</td>
</tr>
</tbody>
</table>
<div class="wpmd">
<div id="table" style="position:absolute; overflow:hidden; left:9px; top:50px; width:960px; height:300px; z-inde x:0">
<table border="0" >
<tr valign=top>
<td width=132 bgcolor="#FF0000">
<div align=center><font color="#FFFFFF" class="ws12"><B>Naam</B></font></div>
</div>
</td>
<td width=132>
</td>
<td width=31>
</td>
<td width=132 bgcolor="#0000FF">
<div align=center><font color="#FFFFFF" class="ws12"><B>Achternaam</B></font></div>
</div>
</td>
<td width=132>
</td>
<tr><tr>
</tr>
<tr valign=top>
<td width=132 bgcolor="#FF0000">
<div align=center><font color="#FFFFFF" class="ws12"><B>Woonplaats</B></font></div>
</div>
</td>
<td width=132 bgcolor="#FF0000">
<div align=center><font color="#FFFFFF" class="ws12"><B>Postcode</B></font></div>
</div>
</td>
<td width=31>
</td>
<td width=132 bgcolor="#0000FF">
<div align=center><font color="#FFFFFF" class="ws12"><B>Art</B></font></div>
</div>
</td>
<td width=132 bgcolor="#0000FF">
<div align=center><font color="#FFFFFF" class="ws12"><B>Type</B></font></div>
</div>
</td>
</tr>
<tbody id="data">
<?php
$con = mysql_connect('localhost','Username','Password');
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("testdatabase",$con);
$result = mysql_query("SELECT * FROM testtabel");
while ($row = mysql_fetch_array($result)) {
?>
<tr>
<td STYLE="text-align: center;"> <?php echo $row['naam']; ?></td>
<td><?php echo $row['woonplaats']; ?></td>
<td width=31></td>
<td STYLE="text-align: center;"> <?php echo $row['naam2']; ?></td>
<td><?php echo $row['woonplaats2']; ?></td>
</tr>
<?php
}
mysql_close($con);
?>
</tbody>
</table>
</div>
</body>
</html>
