javascript - Filter Table Row in Html

I have created a html page which has a search text and a table below with some data on it in the table.

I used the code available on JSFiddle.

But it did not work. Please suggest something like the example shown.

I am using a simple html, CSS and Javascript coding.

In this jQuery is used:

var $rows = $('#table td');
$('#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();
});

Can I have something simpler since this is a hybrid application?

I am using the following code. Please check

<!DOCTYPE html>
<html>
<head>
<title>Search Box Example 2 - default placeholder text gets cleared on click</title>
<link rel="stylesheet" href="css/SalesTable.css">

<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<!-- JAVASCRIPT to clear search text when the field is clicked -->

<script src=".1.0.js"></script>
<script type="text/javascript">

var $rows = $('#table tr');
$('#tfq').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();
});

</script>



<!-- CSS styles for standard search box with placeholder text-->

</head>
<body>
    <!-- HTML for SEARCH BAR -->
    <div id="tfheader">
        <form id="tfnewsearch" method="get" action="">
                <input type="text" id="tfq" class="tftextinput2" name="q" size="21" maxlength="120" placeholder="Type to search"><input type="button" value="Search" class="tfbutton2">
        </form>
        <div class="tfclear"></div>
    </div>

    <br>
    <br>

    <div id="tableSalesOrder">
    <table id="table">


    <tr>
    <th>
    A
    </th>
    <th>
    B
    </th>
    <th>
    C
    </th>
    <th>
    D
    </th>
    </tr>

    <script language="javascript">
    <!--

    for(i =0 ;i<4 ; i++)
    {
    document.write('<tr>');
    document.write('<td>12345</td>')
    document.write('<td>34566</td>')
    document.write('<td>345356</td>')
    document.write('<td>Tyjhue</td>')
    document.write('<td><form id="approveForm"><input type = "submit" value="ButtonA"></form></td>')
    document.write('<td><form id="rejectForm"><input type = "submit" value="ButtonB"></form></td>')
    document.write('<td><form id="detailForm"><input type = "submit" value="ButtonC"></form></td>')
    document.write('</tr>')

    }

    //-->
    </script>

    </table>

    </div>

</body>
</html>

I have created a html page which has a search text and a table below with some data on it in the table.

I used the code available on JSFiddle.

But it did not work. Please suggest something like the example shown.

I am using a simple html, CSS and Javascript coding.

In this jQuery is used:

var $rows = $('#table td');
$('#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();
});

Can I have something simpler since this is a hybrid application?

I am using the following code. Please check

<!DOCTYPE html>
<html>
<head>
<title>Search Box Example 2 - default placeholder text gets cleared on click</title>
<link rel="stylesheet" href="css/SalesTable.css">

<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<!-- JAVASCRIPT to clear search text when the field is clicked -->

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript">

var $rows = $('#table tr');
$('#tfq').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();
});

</script>



<!-- CSS styles for standard search box with placeholder text-->

</head>
<body>
    <!-- HTML for SEARCH BAR -->
    <div id="tfheader">
        <form id="tfnewsearch" method="get" action="http://www.google.com">
                <input type="text" id="tfq" class="tftextinput2" name="q" size="21" maxlength="120" placeholder="Type to search"><input type="button" value="Search" class="tfbutton2">
        </form>
        <div class="tfclear"></div>
    </div>

    <br>
    <br>

    <div id="tableSalesOrder">
    <table id="table">


    <tr>
    <th>
    A
    </th>
    <th>
    B
    </th>
    <th>
    C
    </th>
    <th>
    D
    </th>
    </tr>

    <script language="javascript">
    <!--

    for(i =0 ;i<4 ; i++)
    {
    document.write('<tr>');
    document.write('<td>12345</td>')
    document.write('<td>34566</td>')
    document.write('<td>345356</td>')
    document.write('<td>Tyjhue</td>')
    document.write('<td><form id="approveForm"><input type = "submit" value="ButtonA"></form></td>')
    document.write('<td><form id="rejectForm"><input type = "submit" value="ButtonB"></form></td>')
    document.write('<td><form id="detailForm"><input type = "submit" value="ButtonC"></form></td>')
    document.write('</tr>')

    }

    //-->
    </script>

    </table>

    </div>

</body>
</html>

Share Improve this question edited Aug 12, 2018 at 18:41 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Feb 4, 2014 at 12:32 Yatin 3,12010 gold badges38 silver badges72 bronze badges

This worked for my use case: codepen.io/chriscoyier/pen/tIuBL – ccpizza Commented Jun 27, 2016 at 16:13

Add a comment |

2 Answers 2

Sorted by: Reset to default 10

include Jquery

    <head>
     <style type="text/css">
       body {padding: 20px;}
       input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
       td {padding: 4px; border: 1px #CCC solid; width: 100px;}
     </style>    
    </head>
   <body>
    <input type="text" id="search" placeholder="Type to search">
      <table id="table">
      <tr> <td>Apple</td>
           <td>Green</td>
      </tr>
      <tr> <td>Grapes</td>
           <td>Green</td>
      </tr>
      <tr> <td>Orange</td>
           <td>Orange</td>
      </tr>
   </table>
   <script src="http://code.jquery.com/jquery-2.1.0.js"></script>
   <script type="text/javascript">
     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();
     });
    </script>
    </body>

Run the code,

The JavaScript code should be interpreted after the DOM is ready.

Since you're using the script in the <head> section, #table tr elements are not ready yet; Hence the jQuery is unable to select the elements.

You could use .ready() method to check whether the document is ready:

$(document).ready(function() {
    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();
    });
});

Or put your <script>...</script> tag at the bottom, right before </body> end tag.

Further info: http://learn.jquery.com/using-jquery-core/document-ready/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Filter Table Row in Html - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)