CODEWITHSUNDEEP
jquery
EducateYourself
EducateYourself

Reputation: 979

jquery search works for one column instead of the whole html table

Just want to add search possibility to loaded table using jquery , but the code below works for the first column only. I would like to make it work for all the cells. Could you please check the code and help me to find my mistake:

here is my html code:

<span id="search"></span>

here is my js code:

$("#search").on("keyup", function () {
    var value = $(this).text();

    $("table tr").each(function (index) {
        if (index != 0) {

            $row = $(this);

            $row.each(function () {

                var cell = $row.find("td").text();

                if (cell.indexOf(value) != 0) {
                    $(this).hide();
                } else {
                    $(this).show();
                }
            });
        }
    });
});

Upvotes: 2

Views: 4079

Answers (4)

user10495801
user10495801

Reputation: 1

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/r-2.1.1/datatables.min.css" />
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/r-2.1.1/datatables.min.js"></script>
    <table class="table">
      <thead>
        <tr>
          <th>Title</th>
          <th>Name</th>
          <th>State (D)</th>
          <th>Party</th>
          <th>Room</th>
          <th>Phone #</th>
          <th>Special Role(s)</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Title</th>
          <th>Name</th>
          <th>State (D)</th>
          <th>Party</th>
          <th>Room</th>
          <th>Phone #</th>
          <th>Special Role(s)</th>
        </tr>
      </tfoot>
      <tbody id="congress">
        <tr>
          <td>Senator</td>
          <td><a href="http://www.alexander.senate.gov/">Alexander, Lamar</a></td>
          <td>TN</td>
          <td class="republican">Rep.</td>
          <td>455 Dirksen</td>
          <td>(202) 224-4944</td>
          <td></td>
        </tr>

        <tr>
          <td>Senator</td>
          <td><a href="http://www.barrasso.senate.gov">Barrasso, John</a></td>
          <td>WY</td>
          <td class="republican">Rep.</td>
          <td>307 Dirksen</td>
          <td>(202) 224-6441</td>
          <td></td>
        </tr>
      </tbody>
    </table>
<script type="text/javascript">
    $(document).ready(function() {

    var $table = $('table');

    // DataTable
    var table = $table.DataTable({
      lengthChange: false
    });

    });
</script>

Jsfiddle : http://jsfiddle.net/hq6mg5zb/

Upvotes: 0

Giannis Grivas
Giannis Grivas

Reputation: 3412

Try this one for all tr elements:

var $rows = $('table tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

Look an example http://jsfiddle.net/921dpr7a/

Upvotes: 0

artm
artm

Reputation: 8584

I don't think you need to do a $row.each as you're already in an each, try an each on the columns instead:

$("#search").on("keyup", function () {
    var value = $(this).text();

    $("table tr").each(function (index) {
        if (index != 0) {

            $row = $(this);

            $row.find("td").each(function () {

                var cell = $(this).text();

                if (cell.indexOf(value) != 0) {
                    $(this).hide();
                } else {
                    $(this).show();
                }
            });
        }
    });
});

Edit:

http://jsfiddle.net/rn8dsnwm/2/

$("#search").keyup(function () {
    var value = $(this).val();

    if (value.length){
        $("table tr").each(function (index) {
            if (index != 0) {

                $row = $(this);

                $row.find("td").each(function () {

                var cell = $(this).text();

                if (cell.indexOf(value) < 0) {
                    $row.hide();
                } else {
                    $row.show();
                    return false; //Once it's shown you don't want to hide it on the next cell
            }

        });
    }
});
}
else{
    //if empty search text, show all rows
    $("table tr").show();

}
});

Upvotes: 2

emerson.marini
emerson.marini

Reputation: 9348

I think you have a logic issue when trying to loop through the cells of a row.

This should work:

$("#search").on("keyup", function () {
    var value = $(this).val();

    $("table tr:not(:first-of-type)").each(function (ix, el) {
        $row = $(this);
        $cells = $row.find('td');

        $cells.each(function (ix2, el2) {            
            var cell = $(this).text();

            $row.toggle(cell.indexOf(value) >= 0);
        });
    });
});

Demo

Upvotes: 1

Related Questions