Estou tentando descobrir porque determinadas funçoes do arquivo “aula05.js” não esta executando a ação no meu HTML.
<!DOCTYPE html>
<html>
<head>
<title>Curso JQuery - Universidade XTI</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="../jquery-3.3.1.js"></script>
<script type="text/javascript" src="aula05.js"></script>
<link rel="stylesheet" type="text/css" href="../../../bootstrap-4.0.0-beta/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="aula05.css">
<script type="text/javascript">
//função de busca
function capturarPesquisa() {
var palavra = document.getElementById("busca").value;
if (palavra == "") {
alert("Campo vazio!!");
} else {
buscarPalavra(palavra);
}
}
</script>
</head>
<body>
<div class="container">
<div class="badge-danger">
<h2>Curso jQuery - Universidade XTI</h2>
</div>
<div class="row">
<div class="posTabela">
<table class="table table-bordered table-striped">
<thead class="table-dark">
<tr>
<td>tipo</td>
<td>Dado</td>
<td>Descrição</td>
<td>Info</td>
</tr>
</thead>
<tbody>
<tr class="table-info">
<td>1</td>
<td>Desenvolvimento Java</td>
<td>JAVA SE</td>
<td>Desenvolver aplicaçoes desktop</td>
</tr>
<tr class="table-success">
<td>4</td>
<td>Desenvolvimento Javascript</td>
<td>JavaScript</td>
<td>Desenvolver aplicaçoes web com interações</td>
</tr>
<tr class="table-warning">
<td>3</td>
<td>Desenolvimento jQuery</td>
<td>jQuery</td>
<td>Manipulação de elementos HTML com jQuery</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-6">
<form class="form-inline">
<label>Procurar palavra: </label>
<input class="form-control botoes" type="search" placeholder="palavra" id="busca">
<input class="btn btn-info botoes" type="button" value="buscar" onclick="capturarPesquisa()" id="limpar">
</form>
</div>
<div class="col-2"></div>
<!--botoes de seleção de ordens -->
<div class="row">
<div>
<form class="form-control">
<input class="btn btn-secondary" type="button" value="Filtro: first" onclick="seletoresOrdem1()">
<input class="btn btn-primary" type="button" value="Filtro: last" onclick="seletoresOrdem2()">
<input class="btn btn-info" type="button" value="Filtro not(last)" onclick="seletoresOrdem3()">
</form>
</div>
</div> <!-- fim da linha -->
</div>
</div>
</body>
Conteudo do arquivo “aula05.js”
/**
* Função que busca uma palavra em uma <td> dentro da tabela
* alterando a sua cor da fonte
* @param {type} palavra
* @returns {undefined}
*/
function buscarPalavra(palavra){
var p = palavra;
$("td:contains("+ p +")").css("color", "red");
}
function seletoresOrdem1(){
$("tr:first").css("background", "yellow"); //seleciona a primeira <tr> da tabela
}
function seletoresOrdem2(){
$("tbody tr:last").css("background", "red");
}
function seltoresOrdem3(){
$("table tr not(table tr:first").css("background", "blue"); //seleciona todos <tr>, exceto a ultima <tr>
}