How to search using jquery by TITLE attribute?

Asked

Viewed 43 times

-2

I hope this message finds you well.

I have a jquery code that performs table searches in real time. This code searches this table for cell values, but I need it to search at the same time for values and values of the title attribute.

Example if I have a company name in the table, it will find this company, however, if I own the company logo its name will be in the TITLE attribute and not as cell value. I need this code to search for both, both companies that only have the registered name and also those that have right in the table, but that the name is in TITLE.

Already anticipating my thanks, follow the code below.

Strong embrace to all!

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<script>
    $(document).ready(function() {
        // Setup - add a text input to each footer cell
        $('#example tfoot th').each(function() {
            var title = $(this).text();
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        });

        // DataTable
        var table = $('#example').DataTable({
            initComplete: function() {
                // Apply the search
                this.api().columns().every(function() {
                    var that = this;

                    $('input', this.footer()).on('keyup change clear', function() {
                        if (that.search() !== this.value) {
                            that
                                .search(this.value)
                                .draw();
                        }
                    });
                });
            }
        });

    });
</script>
html jquery quest

1 answer

1

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
 $(document).ready(function(){  $("p[title|='Tomorrow']").css("background-color", "yellow");});  
</script>
</head>
<body>
<p title="Tomorrow">This is a paragraph.</p>
<p title="tomorrow">This is a paragraph.</p>
<p title="Tom">This is a paragraph.</p>
<p title="See You Tomorrow">This is a paragraph.</p>
<p title="Tomorrow-the day after today">This is a paragraph.</p>
<p>This selector selects all elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen.</p>
</body>
</html>

In this passage is the "secret" of the thing

$(document).ready(function(){  $("p[title|='Tomorrow']").css("background-color", "yellow");});

Then I can search for the p tag and with a specific title name and add the yellow background in the element whose title is "Tomorrow", I think that’s what you want.

Edit 1: you can replace too, and another example of this is this below

<!DOCTYPE html>
<html>
<head>
    <title>Esconder titulos</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <input type="text" name="texto" id="texto">
    <button id="btn">Aplicar Titulo</button>
</body>

Script.js:

document.addEventListener('DOMContentLoaded',function() {
document.querySelector('#btn').addEventListener('click', function() {
    let text = document.querySelector('#texto').value;
    document.title = text;
});
});

Browser other questions tagged html jquery quest

You are not signed in. Login or sign up in order to post.