Estou tentando adicionar uma tabela de dados conforme abaixo com um input de pequisa onde deveria trazer a linha correspondente. Quando adiciono todos os campos HTML o editor funciona, porém quando adiciono as funções o editor simplesmente não abre... alguém saberia dizer se este editor padrão somente aceita html?
Abaixo esta o código funcionando no java...
<html>
<head>
<title>Lista de ramais</title>
</head>
<body>
<table id="lista">
<thead>
<tr>
<th>Nome:<input type="text" name="filtro-nome" id="filtro-nome" value=""></th>
<th>Ramal</th>
</tr>
</thead>
<tbody>
<tr>
<td>ACÁCIO - COMPRAS</td>
<td>8009</td>
</tr>
<tr>
<td>ADRIANA PEDROSA - GERENTE DE CÂMBIO</td>
<td>3369/3580</td>
</tr>
<tr>
<td>ADRIANO ROSA - LOGISTICA</td>
<td>3354</td>
</tr>
<tr>
<td>ADRIEL - BIODIESEL</td>
<td>3737</td>
</tr>
<tr>
<td>AFONSO PELEGRINI (SAP) - TI </td>
<td>3664</td>
</tr>
<tr>
<td>AGATA - RH COMERCIAL</td>
<td>3496</td>
</tr>
<tr>
<td>ALCIONE - RH</td>
<td>3323</td>
</tr>
<tr>
<td>ALESSANDRO SOUZA - COUROS</td>
<td>3886</td>
</tr>
<tr>
</tbody>
</table>
<script type="text/javascript">
var filtro = document.getElementById('filtro-nome');
var tabela = document.getElementById('lista');
filtro.onkeyup = function() {
var nomeFiltro = filtro.value;
for (var i = 1; i < tabela.rows.length; i++) {
var conteudoCelula = tabela.rows[i].cells[0].innerText;
var corresponde = conteudoCelula.toLowerCase().indexOf(nomeFiltro) >= 0;
tabela.rows[i].style.display = corresponde ? '' : 'none';
}
};
$('#filtro-nome').keyup(function() {
var nomeFiltro = $(this).val().toLowerCase();
$('table tbody').find('tr').each(function() {
var conteudoCelula = $(this).find('td:first').text();
var corresponde = conteudoCelula.toLowerCase().indexOf(nomeFiltro) >= 0;
$(this).css('display', corresponde ? '' : 'none');
});
});
</script>
</body>
</html>