A Pen by Jorge

Thumbnail
This awesome code was written by shabrany, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright shabrany ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Jorge</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

  
  
</head>

<body>

  <div class="container">
        <h1>Search table</h1>
        <div class="form-group">
            <input type="text" class="form-control col-sm-6" id="search-table" data-table="movie-list">
            <br><br>
        </div>

        <table class="table" id="movie-list">
                        <tbody>
            
                <tr style="display: table-row;">
                    <td>Terminator 2: Judgment Day</td>
                    <td>1991</td>
                </tr>
            
                <tr style="display: table-row;">
                    <td>World War Z</td>
                    <td>2013</td>
                </tr>
            
                <tr style="display: table-row;">
                    <td>Prometheus</td>
                    <td>2012</td>
                </tr>
            
                <tr style="display: table-row;">
                    <td>Secondhand Lions</td>
                    <td>2003</td>
                </tr>
            
                <tr style="display: table-row;">
                    <td>Because of Winn-Dixie</td>
                    <td>2005</td>
                </tr>
            
                <tr style="display: table-row;">
                    <td>Salt</td>
                    <td>2010</td>
                </tr>
            
                <tr style="display: table-row;">
                    <td>Kick-Ass</td>
                    <td>2010</td>
                </tr>
                        </tbody>
        </table>
    </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/shabrany/a-pen-by-jorge-aBavEV */
(function($) {

            $(document).ready(function () {
                $('#search-table').on('keyup', function () {
                    findInRow(this.value.trim(), document.getElementById('movie-list'), 0);
                });
            });

            /**
             *
             *
             * @param value
             * @param table
             * @param searchIndex
             * @returns {boolean}
             */
            function findInRow(value, table, searchIndex) {
                for (var i = 0; i < table.rows.length; i++) {
                    var row = table.rows[i];
                    var cellValue = getText(row.cells[searchIndex]).toLowerCase();
                    var found = (cellValue.indexOf(value.toLowerCase()) > -1);
                    row.style.display = (found) ? 'table-row' : 'none';
                }
            }

            /**
             * Get text from
             *
             * @param cell
             * @returns {string|*}
             */
            function getText(cell) {
                return cell.innerText || cell.innerHTML;
            }

        })(jQuery);

Comments