Html incluir contador de apuntes encontrados después de una búsqueda
El buscador que tengo funciona bien, pero que no me indica el número de apuntes encontrados, realiza dos funciones, en la parte inferior te marca en color todas aquellas filas de la tabla, que coincide con la búsqueda. En la parte superior del buscador es donde me interesa poner un contador con los apuntes encontrados, esta parte deja activas y a la vista todas las filas en las que coincide con el parámetro a buscar, es aquí donde quiero poner el contador
He buscado, pero no consigo que cuente el número de filas, por favor ayudarme, ya que yo soy un novato en estos menesteres
Adjunto código
<html>
<head><meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Descripción</title>
<link href="./html_files/corpor~1.css" rel="stylesheet" type="text/css" />
<script language="javascript">
function doSearch()
{ var tableReg = document.getElementById('lista');
var searchText = document.getElementById('searchTerm').value.toLowerCase();
var cellsOfRow=""; var found=false; var compareWith="";
// Recorremos todas las filas con contenido de la tabla
for (var i = 1; i < tableReg.rows.length; i++)
{cellsOfRow = tableReg.rows[i].getElementsByTagName('td');
found = false;
// Recorremos todas las celdas
for (var j = 0; j < cellsOfRow.length && !found; j++)
{ compareWith = cellsOfRow[j].innerHTML.toLowerCase();
// Buscamos el texto en el contenido de la celda
if (searchText.length == 0 || (compareWith.indexOf(searchText) > -1))
{found = true;
}
}
if(found)
{ tableReg.rows[i].style.display = '';
} else {
// si no ha encontrado ninguna coincidencia, esconde la fila de la tabla
tableReg.rows[i].style.display = 'none';
}
}
}
</script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
.resaltar{background-color:#FF0;}
</style>
<script type='text/javascript' >
$.expr[':'].icontains = function(obj, index, meta, stack){
return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
};
$(document).ready(function(){
$('#buscador').keyup(function(){
buscar = $(this).val();
$('#lista tr').removeClass('resaltar');
if(jQuery.trim(buscar) != ''){
$("#lista tr:icontains('" + buscar + "')").addClass('resaltar');
}
});
});
</script>
<style type="text/css">
div.scrolled {
width: 100%;
height: 670px;
overflow: scroll;
}
</style>
</head>
<body>
<br>
<table width="100%" cellspacing="2" cellpadding="0" border="0" >
<tr><td><table width="100%" border="1" cellpadding="0" cellspacing="2" bordercolor="#b4cae5" bgcolor=""><tr bgcolor="#b4cae5">
<td width="100%"height="25" ><span class="titulo_servicio"> Buscar </span>
<input id="searchTerm" type="text" onKeyUp="doSearch()" size="65" />
<span class="contenido">Poner contador apuntes</span></td>
<tr bgcolor="#b4cae5"><td width="100%" height="25" ><span class="titulo_servicio"> Señalar </span>
<input name="buscador" type="text" class="resaltar" id="buscador" size="65" /> <a href="Instranet:Doc:c25a0800-1c13-1033-a1e2-000e7f7e0f28" class="contenidon"> Limpiar </a></td></tr></table><br>
<table width="100%" id="lista" cellspacing="2" cellpadding="0" border="2" bordercolor="#b4cae5" bgcolor="#eff3ff"><tr class="contenidon" bgcolor="#b4cae5">
<td class="contenidon" width="178" ><div align="center">NOMBRE</div></td><td width="52"><div align="center">ALBARAN</div></td><td width="61"><div align="center">FECHA</div></td><td width="441">OBSERVACIONES</td>
</tr><tr class="contenido"><td class="contenido">Alberto</td>
<td><div align="center">676829</div></td><td><div align="center">20/01/16</div></td>
<td><strong>Enviado el:</strong> jueves, 21 de enero de 2016 14:13</td>
</tr> <tr class="contenido"><td class="contenido">Tomas</td><td><div align="center">676829</div></td<td><div align="center">17/01/16</div></td><td><strong>Enviado el:</strong> jueves, 18 de enero de 2016 14:13</td></tr>
<tr class="contenido"><td class="contenido">Alfonso</td><td><div align="center">999999</div></td><td><div align="center">19/01/16</div></td><td><strong>Enviado el:</strong> miércoles, 20 de enero de 2016 17:57 </p></td></tr>
<tr class="contenido"><td class="contenido">Tomas</td><td><div align="center">49627</div></td><td><div align="center">20/06/16</div></td><td><p class="contenido"><strong>Enviado el:</strong> jueves, 21 de enero de 2016 11:20</p></td></tr>
<tr class="contenido"><td class="contenido">Alfonso<BR></td><td><div align="center">714553</div></td><td><div align="center">19/01/16</div></td><td><strong>Enviado el:</strong> jueves, 20 de enero de 2016 12:18</td></tr>
<tr class="contenido"><td class="contenido">Alberto</td><td><div align="center">715105</div></td><td><div align="center">17/01/16</div></td><td><strong>Enviado el:</strong> jueves, 21 de enero de 2016 11:33</td></tr>
<tr class="contenido"><td class="contenido">Alfonso</td><td><div align="center">687611</div></td><td><div align="center">20/01/16</div></td><td><strong>Enviado el:</strong> martes, 21 de enero de 2016 17:00</td></tr></table></td></tr></table>
</body>
</html>
