A Pen by Jorge

Tutorials of (A pen by jorge) by Jorge

<!DOCTYPE html>
<html >
<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/ */
/* Downloaded from https://www.codeseek.co/ */
(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);

This awesome code ( A Pen by Jorge ) is write by Jorge, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Jorge