CODEWITHSUNDEEP
jqueryhtml
Code Ratchet
Code Ratchet

Reputation: 6029

How to search a column in a html table and highlight any matches

Can some one help me out with a code snippet that will allow me to search one column on a html table with the search criteria that has been typed in to a text box? which would be a mobile number i want to be able to search the mobile phone number TD in my table provided below and highlight any matches.....

heres my button and txt box i want to call the jquery off the button click.........

<asp:TextBox ID="txtSearchMobileNumber" runat="server" CssClass="number"></asp:TextBox>

 <asp:button runat="server" id="BtnSearchMobile"\>

heres my table

    <code>
    <table id="HandsetDetails">
         <tr>
          <td>
             Mobile Phone number
             </td>
              <td>
              Network Provider
              </td>
              <td>
                Amount
              </td>
            </tr>
       </table>
</code>

Upvotes: 1

Views: 1848

Answers (1)

Manse
Manse

Reputation: 38147

Use the jQuery highlight plugin

$("#HandsetDetails").highlight(<your keyword(s)>);

then just create a CSS style for your highlighted word(s) :

.highlight {
    background-color: #FFFF88;
}

Using highlight with your HTML :

$('#BtnSearchMobile').click(function() {
    $("#HandsetDetails").highlight($('#txtSearchMobileNumber').val());
});

This uses .click() and .val()

or even better you could use DataTables another jQuery plugin that could filter the table depending on input - and a load more !! export to excel / pdf etc

(note - im not connected to either plugin - just hate re-inventing the wheel)

Upvotes: 1

Related Questions