jQuery hide a TR that has matching text or data attributes

I'd like create a filter that acts on all columns in a table, in particular, ignoring the formatting of telephone numbers.

I thought the easiest approach to this was to add the numeric parts of the telephone number to the nearest TD as a data attribute.

The text-search functionality works as expected, but I can't seem to get the data-attribute search to work.

What am I missing?

$(document).ready(function() {



  $("#inputSearch").on("keyup", function() {



    // search string

    var value = $(this).val().toLowerCase();



    // filter

    $("#tableContacts tr").filter(function() {



      // search text (functions correctly)

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

      // search work-telephone attributes; does not work; disabled

      // || $(this).children('td').data('work-telephone').value.indexOf(value) > -1

      // search mobile-telephone attributes; does not work; disabled

      // || $(this).children('td').data('mobile-telephone').value.indexOf(value) > -1



    });



  });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="inputSearch" type="text" placeholder="Search..." autofocus><br/>

<table id="tableContacts" class="table">

  <thead>

    <tr>

      <th>name</th>

      <th>domain</th>

      <th>email</th>

      <th>work</th>

      <th>mobile</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td><a href="/contacts/5">Morticia Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Morticia.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512342"><a href="tel:(888) 555-1234 x2">(888) 555-1234 x2</a></td>

      <td data-mobile-telephone="8885552222"><a href="tel:(888) 555-2222">(888) 555-2222</a></td>

    </tr>

    <tr>

      <td><a href="/contacts/6">Gomez Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Gomez.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512341"><a href="tel:(888) 555-1234 x1">(888) 555-1234 x1</a></td>

      <td data-mobile-telephone="8885553333"><a href="tel:(888) 555-3333">(888) 555-3333</a></td>

    </tr>

  </tbody>

</table>

edited Nov 13 '18 at 14:24

asked Nov 13 '18 at 13:56

craig

17.1k1678142

2

I fixed your HTML (missing tr, extra <i> ) and created a snippet

– mplungjan
Nov 13 '18 at 14:03

add a comment |

I'd like create a filter that acts on all columns in a table, in particular, ignoring the formatting of telephone numbers.

I thought the easiest approach to this was to add the numeric parts of the telephone number to the nearest TD as a data attribute.

The text-search functionality works as expected, but I can't seem to get the data-attribute search to work.

What am I missing?

$(document).ready(function() {



  $("#inputSearch").on("keyup", function() {



    // search string

    var value = $(this).val().toLowerCase();



    // filter

    $("#tableContacts tr").filter(function() {



      // search text (functions correctly)

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

      // search work-telephone attributes; does not work; disabled

      // || $(this).children('td').data('work-telephone').value.indexOf(value) > -1

      // search mobile-telephone attributes; does not work; disabled

      // || $(this).children('td').data('mobile-telephone').value.indexOf(value) > -1



    });



  });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="inputSearch" type="text" placeholder="Search..." autofocus><br/>

<table id="tableContacts" class="table">

  <thead>

    <tr>

      <th>name</th>

      <th>domain</th>

      <th>email</th>

      <th>work</th>

      <th>mobile</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td><a href="/contacts/5">Morticia Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Morticia.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512342"><a href="tel:(888) 555-1234 x2">(888) 555-1234 x2</a></td>

      <td data-mobile-telephone="8885552222"><a href="tel:(888) 555-2222">(888) 555-2222</a></td>

    </tr>

    <tr>

      <td><a href="/contacts/6">Gomez Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Gomez.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512341"><a href="tel:(888) 555-1234 x1">(888) 555-1234 x1</a></td>

      <td data-mobile-telephone="8885553333"><a href="tel:(888) 555-3333">(888) 555-3333</a></td>

    </tr>

  </tbody>

</table>

edited Nov 13 '18 at 14:24

asked Nov 13 '18 at 13:56

craig

17.1k1678142

2

I fixed your HTML (missing tr, extra <i> ) and created a snippet

– mplungjan
Nov 13 '18 at 14:03

add a comment |

I'd like create a filter that acts on all columns in a table, in particular, ignoring the formatting of telephone numbers.

I thought the easiest approach to this was to add the numeric parts of the telephone number to the nearest TD as a data attribute.

The text-search functionality works as expected, but I can't seem to get the data-attribute search to work.

What am I missing?

$(document).ready(function() {



  $("#inputSearch").on("keyup", function() {



    // search string

    var value = $(this).val().toLowerCase();



    // filter

    $("#tableContacts tr").filter(function() {



      // search text (functions correctly)

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

      // search work-telephone attributes; does not work; disabled

      // || $(this).children('td').data('work-telephone').value.indexOf(value) > -1

      // search mobile-telephone attributes; does not work; disabled

      // || $(this).children('td').data('mobile-telephone').value.indexOf(value) > -1



    });



  });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="inputSearch" type="text" placeholder="Search..." autofocus><br/>

<table id="tableContacts" class="table">

  <thead>

    <tr>

      <th>name</th>

      <th>domain</th>

      <th>email</th>

      <th>work</th>

      <th>mobile</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td><a href="/contacts/5">Morticia Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Morticia.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512342"><a href="tel:(888) 555-1234 x2">(888) 555-1234 x2</a></td>

      <td data-mobile-telephone="8885552222"><a href="tel:(888) 555-2222">(888) 555-2222</a></td>

    </tr>

    <tr>

      <td><a href="/contacts/6">Gomez Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Gomez.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512341"><a href="tel:(888) 555-1234 x1">(888) 555-1234 x1</a></td>

      <td data-mobile-telephone="8885553333"><a href="tel:(888) 555-3333">(888) 555-3333</a></td>

    </tr>

  </tbody>

</table>

edited Nov 13 '18 at 14:24

asked Nov 13 '18 at 13:56

craig

17.1k1678142

I'd like create a filter that acts on all columns in a table, in particular, ignoring the formatting of telephone numbers.

I thought the easiest approach to this was to add the numeric parts of the telephone number to the nearest TD as a data attribute.

The text-search functionality works as expected, but I can't seem to get the data-attribute search to work.

What am I missing?

$(document).ready(function() {



  $("#inputSearch").on("keyup", function() {



    // search string

    var value = $(this).val().toLowerCase();



    // filter

    $("#tableContacts tr").filter(function() {



      // search text (functions correctly)

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

      // search work-telephone attributes; does not work; disabled

      // || $(this).children('td').data('work-telephone').value.indexOf(value) > -1

      // search mobile-telephone attributes; does not work; disabled

      // || $(this).children('td').data('mobile-telephone').value.indexOf(value) > -1



    });



  });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="inputSearch" type="text" placeholder="Search..." autofocus><br/>

<table id="tableContacts" class="table">

  <thead>

    <tr>

      <th>name</th>

      <th>domain</th>

      <th>email</th>

      <th>work</th>

      <th>mobile</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td><a href="/contacts/5">Morticia Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Morticia.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512342"><a href="tel:(888) 555-1234 x2">(888) 555-1234 x2</a></td>

      <td data-mobile-telephone="8885552222"><a href="tel:(888) 555-2222">(888) 555-2222</a></td>

    </tr>

    <tr>

      <td><a href="/contacts/6">Gomez Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Gomez.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512341"><a href="tel:(888) 555-1234 x1">(888) 555-1234 x1</a></td>

      <td data-mobile-telephone="8885553333"><a href="tel:(888) 555-3333">(888) 555-3333</a></td>

    </tr>

  </tbody>

</table>

$(document).ready(function() {



  $("#inputSearch").on("keyup", function() {



    // search string

    var value = $(this).val().toLowerCase();



    // filter

    $("#tableContacts tr").filter(function() {



      // search text (functions correctly)

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

      // search work-telephone attributes; does not work; disabled

      // || $(this).children('td').data('work-telephone').value.indexOf(value) > -1

      // search mobile-telephone attributes; does not work; disabled

      // || $(this).children('td').data('mobile-telephone').value.indexOf(value) > -1



    });



  });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="inputSearch" type="text" placeholder="Search..." autofocus><br/>

<table id="tableContacts" class="table">

  <thead>

    <tr>

      <th>name</th>

      <th>domain</th>

      <th>email</th>

      <th>work</th>

      <th>mobile</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td><a href="/contacts/5">Morticia Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Morticia.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512342"><a href="tel:(888) 555-1234 x2">(888) 555-1234 x2</a></td>

      <td data-mobile-telephone="8885552222"><a href="tel:(888) 555-2222">(888) 555-2222</a></td>

    </tr>

    <tr>

      <td><a href="/contacts/6">Gomez Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Gomez.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512341"><a href="tel:(888) 555-1234 x1">(888) 555-1234 x1</a></td>

      <td data-mobile-telephone="8885553333"><a href="tel:(888) 555-3333">(888) 555-3333</a></td>

    </tr>

  </tbody>

</table>

$(document).ready(function() {



  $("#inputSearch").on("keyup", function() {



    // search string

    var value = $(this).val().toLowerCase();



    // filter

    $("#tableContacts tr").filter(function() {



      // search text (functions correctly)

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

      // search work-telephone attributes; does not work; disabled

      // || $(this).children('td').data('work-telephone').value.indexOf(value) > -1

      // search mobile-telephone attributes; does not work; disabled

      // || $(this).children('td').data('mobile-telephone').value.indexOf(value) > -1



    });



  });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="inputSearch" type="text" placeholder="Search..." autofocus><br/>

<table id="tableContacts" class="table">

  <thead>

    <tr>

      <th>name</th>

      <th>domain</th>

      <th>email</th>

      <th>work</th>

      <th>mobile</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td><a href="/contacts/5">Morticia Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Morticia.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512342"><a href="tel:(888) 555-1234 x2">(888) 555-1234 x2</a></td>

      <td data-mobile-telephone="8885552222"><a href="tel:(888) 555-2222">(888) 555-2222</a></td>

    </tr>

    <tr>

      <td><a href="/contacts/6">Gomez Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Gomez.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512341"><a href="tel:(888) 555-1234 x1">(888) 555-1234 x1</a></td>

      <td data-mobile-telephone="8885553333"><a href="tel:(888) 555-3333">(888) 555-3333</a></td>

    </tr>

  </tbody>

</table>

jquery

edited Nov 13 '18 at 14:24

asked Nov 13 '18 at 13:56

craig

17.1k1678142

edited Nov 13 '18 at 14:24

asked Nov 13 '18 at 13:56

craig

17.1k1678142

edited Nov 13 '18 at 14:24

asked Nov 13 '18 at 13:56

craig

17.1k1678142

asked Nov 13 '18 at 13:56

craig

17.1k1678142

asked Nov 13 '18 at 13:56

craig

17.1k1678142

2

I fixed your HTML (missing tr, extra <i> ) and created a snippet

– mplungjan
Nov 13 '18 at 14:03

add a comment |

2

I fixed your HTML (missing tr, extra <i> ) and created a snippet

– mplungjan
Nov 13 '18 at 14:03

I fixed your HTML (missing tr, extra <i> ) and created a snippet

– mplungjan
Nov 13 '18 at 14:03

add a comment |

1 Answer
1

active

oldest

votes

The .data('propety-name') return the actual contents of the attribute so the .value you add is wrong, returning undefined.

Also $(this).children('td') will return all the <td> but the data will only work on the first <td> in that list.

Then you need to target <tr> inside the <tbody> to avoid affecting the ones in the <thead>

Finally, you need to actually return the value for the .filter function to work (unless you do not need to actually filter in which case you should use each instead)

So, assuming there is only one data-work-telephone and one data-mobile-telephone per <tr> you should do

$(document).ready(function() {



  $("#inputSearch").on("keyup", function() {



    // search string

    var value = $(this).val().toLowerCase();



    // filter



    $("#tableContacts tbody tr").each(function() {



      var self = $(this),

        td = self.children(),

        text = self.text().toLowerCase(),

        workPhone = (td.filter('[data-work-telephone]').data('work-telephone') || '').toString(),

        mobilePhone = (td.filter('[data-mobile-telephone]').data('mobile-telephone') || '').toString(),

        match = text.indexOf(value) > -1 ||

        workPhone.indexOf(value) > -1 ||

        mobilePhone.indexOf(value) > -1;



      self.toggle(match)

    });



  });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="inputSearch" type="text" placeholder="Search..." autofocus><br/>

<table id="tableContacts" class="table">

  <thead>

    <tr>

      <th>name</th>

      <th>domain</th>

      <th>email</th>

      <th>work</th>

      <th>mobile</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td><a href="/contacts/5">Morticia Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Morticia.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512342"><a href="tel:(888) 555-1234 x2">(888) 555-1234 x2</a></td>

      <td data-mobile-telephone="8885552222"><a href="tel:(888) 555-2222">(888) 555-2222</a></td>

    </tr>

    <tr>

      <td><a href="/contacts/6">Someone else</a></td>

      <td>domain.tld</td>

      <td><a href="mailto:Someone.else@domain.tld" class="text-truncate">Someone.else@domain.tld</a></td>

      <td data-work-telephone="1321321546"><a href="tel:(132) 132-1546">(888) 555-1234</a></td>

      <td>N/A</td>

    </tr>

  </tbody>

</table>

edited Nov 13 '18 at 14:27

answered Nov 13 '18 at 14:02

Gabriele Petrioli

150k23199256

1

For numeric values data(key) will return a number not string

– charlietfl
Nov 13 '18 at 14:06

@charlietfl good point. Updating..

– Gabriele Petrioli
Nov 13 '18 at 14:07

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53282642%2fjquery-hide-a-tr-that-has-matching-text-or-data-attributes%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

The .data('propety-name') return the actual contents of the attribute so the .value you add is wrong, returning undefined.

Also $(this).children('td') will return all the <td> but the data will only work on the first <td> in that list.

Then you need to target <tr> inside the <tbody> to avoid affecting the ones in the <thead>

Finally, you need to actually return the value for the .filter function to work (unless you do not need to actually filter in which case you should use each instead)

So, assuming there is only one data-work-telephone and one data-mobile-telephone per <tr> you should do

$(document).ready(function() {



  $("#inputSearch").on("keyup", function() {



    // search string

    var value = $(this).val().toLowerCase();



    // filter



    $("#tableContacts tbody tr").each(function() {



      var self = $(this),

        td = self.children(),

        text = self.text().toLowerCase(),

        workPhone = (td.filter('[data-work-telephone]').data('work-telephone') || '').toString(),

        mobilePhone = (td.filter('[data-mobile-telephone]').data('mobile-telephone') || '').toString(),

        match = text.indexOf(value) > -1 ||

        workPhone.indexOf(value) > -1 ||

        mobilePhone.indexOf(value) > -1;



      self.toggle(match)

    });



  });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="inputSearch" type="text" placeholder="Search..." autofocus><br/>

<table id="tableContacts" class="table">

  <thead>

    <tr>

      <th>name</th>

      <th>domain</th>

      <th>email</th>

      <th>work</th>

      <th>mobile</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td><a href="/contacts/5">Morticia Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Morticia.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512342"><a href="tel:(888) 555-1234 x2">(888) 555-1234 x2</a></td>

      <td data-mobile-telephone="8885552222"><a href="tel:(888) 555-2222">(888) 555-2222</a></td>

    </tr>

    <tr>

      <td><a href="/contacts/6">Someone else</a></td>

      <td>domain.tld</td>

      <td><a href="mailto:Someone.else@domain.tld" class="text-truncate">Someone.else@domain.tld</a></td>

      <td data-work-telephone="1321321546"><a href="tel:(132) 132-1546">(888) 555-1234</a></td>

      <td>N/A</td>

    </tr>

  </tbody>

</table>

edited Nov 13 '18 at 14:27

answered Nov 13 '18 at 14:02

Gabriele Petrioli

150k23199256

1

For numeric values data(key) will return a number not string

– charlietfl
Nov 13 '18 at 14:06

@charlietfl good point. Updating..

– Gabriele Petrioli
Nov 13 '18 at 14:07

add a comment |

The .data('propety-name') return the actual contents of the attribute so the .value you add is wrong, returning undefined.

Also $(this).children('td') will return all the <td> but the data will only work on the first <td> in that list.

Then you need to target <tr> inside the <tbody> to avoid affecting the ones in the <thead>

Finally, you need to actually return the value for the .filter function to work (unless you do not need to actually filter in which case you should use each instead)

So, assuming there is only one data-work-telephone and one data-mobile-telephone per <tr> you should do

$(document).ready(function() {



  $("#inputSearch").on("keyup", function() {



    // search string

    var value = $(this).val().toLowerCase();



    // filter



    $("#tableContacts tbody tr").each(function() {



      var self = $(this),

        td = self.children(),

        text = self.text().toLowerCase(),

        workPhone = (td.filter('[data-work-telephone]').data('work-telephone') || '').toString(),

        mobilePhone = (td.filter('[data-mobile-telephone]').data('mobile-telephone') || '').toString(),

        match = text.indexOf(value) > -1 ||

        workPhone.indexOf(value) > -1 ||

        mobilePhone.indexOf(value) > -1;



      self.toggle(match)

    });



  });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="inputSearch" type="text" placeholder="Search..." autofocus><br/>

<table id="tableContacts" class="table">

  <thead>

    <tr>

      <th>name</th>

      <th>domain</th>

      <th>email</th>

      <th>work</th>

      <th>mobile</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td><a href="/contacts/5">Morticia Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Morticia.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512342"><a href="tel:(888) 555-1234 x2">(888) 555-1234 x2</a></td>

      <td data-mobile-telephone="8885552222"><a href="tel:(888) 555-2222">(888) 555-2222</a></td>

    </tr>

    <tr>

      <td><a href="/contacts/6">Someone else</a></td>

      <td>domain.tld</td>

      <td><a href="mailto:Someone.else@domain.tld" class="text-truncate">Someone.else@domain.tld</a></td>

      <td data-work-telephone="1321321546"><a href="tel:(132) 132-1546">(888) 555-1234</a></td>

      <td>N/A</td>

    </tr>

  </tbody>

</table>

edited Nov 13 '18 at 14:27

answered Nov 13 '18 at 14:02

Gabriele Petrioli

150k23199256

1

For numeric values data(key) will return a number not string

– charlietfl
Nov 13 '18 at 14:06

@charlietfl good point. Updating..

– Gabriele Petrioli
Nov 13 '18 at 14:07

add a comment |

The .data('propety-name') return the actual contents of the attribute so the .value you add is wrong, returning undefined.

Also $(this).children('td') will return all the <td> but the data will only work on the first <td> in that list.

Then you need to target <tr> inside the <tbody> to avoid affecting the ones in the <thead>

Finally, you need to actually return the value for the .filter function to work (unless you do not need to actually filter in which case you should use each instead)

So, assuming there is only one data-work-telephone and one data-mobile-telephone per <tr> you should do

$(document).ready(function() {



  $("#inputSearch").on("keyup", function() {



    // search string

    var value = $(this).val().toLowerCase();



    // filter



    $("#tableContacts tbody tr").each(function() {



      var self = $(this),

        td = self.children(),

        text = self.text().toLowerCase(),

        workPhone = (td.filter('[data-work-telephone]').data('work-telephone') || '').toString(),

        mobilePhone = (td.filter('[data-mobile-telephone]').data('mobile-telephone') || '').toString(),

        match = text.indexOf(value) > -1 ||

        workPhone.indexOf(value) > -1 ||

        mobilePhone.indexOf(value) > -1;



      self.toggle(match)

    });



  });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="inputSearch" type="text" placeholder="Search..." autofocus><br/>

<table id="tableContacts" class="table">

  <thead>

    <tr>

      <th>name</th>

      <th>domain</th>

      <th>email</th>

      <th>work</th>

      <th>mobile</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td><a href="/contacts/5">Morticia Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Morticia.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512342"><a href="tel:(888) 555-1234 x2">(888) 555-1234 x2</a></td>

      <td data-mobile-telephone="8885552222"><a href="tel:(888) 555-2222">(888) 555-2222</a></td>

    </tr>

    <tr>

      <td><a href="/contacts/6">Someone else</a></td>

      <td>domain.tld</td>

      <td><a href="mailto:Someone.else@domain.tld" class="text-truncate">Someone.else@domain.tld</a></td>

      <td data-work-telephone="1321321546"><a href="tel:(132) 132-1546">(888) 555-1234</a></td>

      <td>N/A</td>

    </tr>

  </tbody>

</table>

edited Nov 13 '18 at 14:27

answered Nov 13 '18 at 14:02

Gabriele Petrioli

150k23199256

The .data('propety-name') return the actual contents of the attribute so the .value you add is wrong, returning undefined.

Also $(this).children('td') will return all the <td> but the data will only work on the first <td> in that list.

Then you need to target <tr> inside the <tbody> to avoid affecting the ones in the <thead>

Finally, you need to actually return the value for the .filter function to work (unless you do not need to actually filter in which case you should use each instead)

So, assuming there is only one data-work-telephone and one data-mobile-telephone per <tr> you should do

$(document).ready(function() {



  $("#inputSearch").on("keyup", function() {



    // search string

    var value = $(this).val().toLowerCase();



    // filter



    $("#tableContacts tbody tr").each(function() {



      var self = $(this),

        td = self.children(),

        text = self.text().toLowerCase(),

        workPhone = (td.filter('[data-work-telephone]').data('work-telephone') || '').toString(),

        mobilePhone = (td.filter('[data-mobile-telephone]').data('mobile-telephone') || '').toString(),

        match = text.indexOf(value) > -1 ||

        workPhone.indexOf(value) > -1 ||

        mobilePhone.indexOf(value) > -1;



      self.toggle(match)

    });



  });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="inputSearch" type="text" placeholder="Search..." autofocus><br/>

<table id="tableContacts" class="table">

  <thead>

    <tr>

      <th>name</th>

      <th>domain</th>

      <th>email</th>

      <th>work</th>

      <th>mobile</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td><a href="/contacts/5">Morticia Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Morticia.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512342"><a href="tel:(888) 555-1234 x2">(888) 555-1234 x2</a></td>

      <td data-mobile-telephone="8885552222"><a href="tel:(888) 555-2222">(888) 555-2222</a></td>

    </tr>

    <tr>

      <td><a href="/contacts/6">Someone else</a></td>

      <td>domain.tld</td>

      <td><a href="mailto:Someone.else@domain.tld" class="text-truncate">Someone.else@domain.tld</a></td>

      <td data-work-telephone="1321321546"><a href="tel:(132) 132-1546">(888) 555-1234</a></td>

      <td>N/A</td>

    </tr>

  </tbody>

</table>

$(document).ready(function() {



  $("#inputSearch").on("keyup", function() {



    // search string

    var value = $(this).val().toLowerCase();



    // filter



    $("#tableContacts tbody tr").each(function() {



      var self = $(this),

        td = self.children(),

        text = self.text().toLowerCase(),

        workPhone = (td.filter('[data-work-telephone]').data('work-telephone') || '').toString(),

        mobilePhone = (td.filter('[data-mobile-telephone]').data('mobile-telephone') || '').toString(),

        match = text.indexOf(value) > -1 ||

        workPhone.indexOf(value) > -1 ||

        mobilePhone.indexOf(value) > -1;



      self.toggle(match)

    });



  });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="inputSearch" type="text" placeholder="Search..." autofocus><br/>

<table id="tableContacts" class="table">

  <thead>

    <tr>

      <th>name</th>

      <th>domain</th>

      <th>email</th>

      <th>work</th>

      <th>mobile</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td><a href="/contacts/5">Morticia Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Morticia.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512342"><a href="tel:(888) 555-1234 x2">(888) 555-1234 x2</a></td>

      <td data-mobile-telephone="8885552222"><a href="tel:(888) 555-2222">(888) 555-2222</a></td>

    </tr>

    <tr>

      <td><a href="/contacts/6">Someone else</a></td>

      <td>domain.tld</td>

      <td><a href="mailto:Someone.else@domain.tld" class="text-truncate">Someone.else@domain.tld</a></td>

      <td data-work-telephone="1321321546"><a href="tel:(132) 132-1546">(888) 555-1234</a></td>

      <td>N/A</td>

    </tr>

  </tbody>

</table>

$(document).ready(function() {



  $("#inputSearch").on("keyup", function() {



    // search string

    var value = $(this).val().toLowerCase();



    // filter



    $("#tableContacts tbody tr").each(function() {



      var self = $(this),

        td = self.children(),

        text = self.text().toLowerCase(),

        workPhone = (td.filter('[data-work-telephone]').data('work-telephone') || '').toString(),

        mobilePhone = (td.filter('[data-mobile-telephone]').data('mobile-telephone') || '').toString(),

        match = text.indexOf(value) > -1 ||

        workPhone.indexOf(value) > -1 ||

        mobilePhone.indexOf(value) > -1;



      self.toggle(match)

    });



  });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="inputSearch" type="text" placeholder="Search..." autofocus><br/>

<table id="tableContacts" class="table">

  <thead>

    <tr>

      <th>name</th>

      <th>domain</th>

      <th>email</th>

      <th>work</th>

      <th>mobile</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td><a href="/contacts/5">Morticia Addams</a></td>

      <td>ghouhl.io</td>

      <td><a href="mailto:Morticia.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>

      <td data-work-telephone="88855512342"><a href="tel:(888) 555-1234 x2">(888) 555-1234 x2</a></td>

      <td data-mobile-telephone="8885552222"><a href="tel:(888) 555-2222">(888) 555-2222</a></td>

    </tr>

    <tr>

      <td><a href="/contacts/6">Someone else</a></td>

      <td>domain.tld</td>

      <td><a href="mailto:Someone.else@domain.tld" class="text-truncate">Someone.else@domain.tld</a></td>

      <td data-work-telephone="1321321546"><a href="tel:(132) 132-1546">(888) 555-1234</a></td>

      <td>N/A</td>

    </tr>

  </tbody>

</table>

edited Nov 13 '18 at 14:27

answered Nov 13 '18 at 14:02

Gabriele Petrioli

150k23199256

edited Nov 13 '18 at 14:27

answered Nov 13 '18 at 14:02

Gabriele Petrioli

150k23199256

answered Nov 13 '18 at 14:02

Gabriele Petrioli

150k23199256

answered Nov 13 '18 at 14:02

Gabriele Petrioli

150k23199256

1

For numeric values data(key) will return a number not string

– charlietfl
Nov 13 '18 at 14:06

@charlietfl good point. Updating..

– Gabriele Petrioli
Nov 13 '18 at 14:07

add a comment |

1

For numeric values data(key) will return a number not string

– charlietfl
Nov 13 '18 at 14:06

@charlietfl good point. Updating..

– Gabriele Petrioli
Nov 13 '18 at 14:07

For numeric values data(key) will return a number not string

– charlietfl
Nov 13 '18 at 14:06

@charlietfl good point. Updating..

– Gabriele Petrioli
Nov 13 '18 at 14:07

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nrthugu