How to pass the html script to css?

0

Some sites like w3schools , while providing some code, keep the script on the same page as the html code.

How can I pass everything in the script below to my .jsp?

<div>
    <div class="container">
        <h2>Rubricas cadastradas</h2>
        <input class="form-control" id="myInput" type="text" placeholder="Pesquisar...">
        <table class="table table-sm">
            <thead class="thead-dark">
                <tr>
                    <th>Categoria</th>
                    <th>Rubrica</th>
                    <th>Valor</th>
                    <th>Excluir</th>
                </tr>
            </thead>
            <tbody id="myTable">
                <c:forEach items="${rubricas}" var="rubrica">
                    <tr>
                        <td> --- </td>
                        <td> ${rubrica.nome}</td>
                        <td> ${rubrica.getValorTotal()}</td>
                        <td style="width: 16%">
                            <form action="excluirProjeto" method="POST">
                                <input type="hidden" class="form-control" value="${projeto.id}" name="projeto_id">
                                <button type="submit" class="btn btn-link"> <img src="../img/excluir.png" alt="Logo" style="width:100%;"> </button>
                            </form> 
                        </td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
      </div>
</div>
<script>
    $(document).ready(function(){
        $("#myInput").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#myTable tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });
</script>
    
asked by anonymous 15.05.2018 / 19:25

1 answer

0

The best practice for working with scripts is to use an external file and call it inside a script tag

The code below must be in a separate file. For example: script.js

$(document).ready(function(){
    $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#myTable tr").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });
});

And in your html , you call the file as follows:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="script.js"></script>

In Attribute "src" should contain the path to your .js

It's also a good practice to call the script tag on the last line before closing the </body> tag

    
15.05.2018 / 19:34