Find exact value in cell of a table and add class to row

Question

I am trying to use jquery to find a exact value in a cell in a table then add a class to that row I currently have this bit of code.

$("tr").find(".closeID:contains(2)").parent('tr').addClass('selected');

Which does work but its doing contains so if any cell with the class closeID has the value in will add the class but I want it to be exact so that if I look for the number 1 it won't add the class to 1,10,11,12,13 and so on.

This is one of my rows in my table the data is pulled in with php.

                     <tr>
                        <td>'. $i++ .'</td>
                        <td>'.dateTime($data['submit_date']).'</td>
                        <td>'.dateTime($data['event_date']).'</td>
                        <td>'.$data['project_code'].'</td>
                        <td>'.$data['project_name'].'</td>
                        <td>'.$data['event'].'</td>
                        <td>'.$data['happened'].'</td>
                        <td>'.$data['about'].'</td>
                        <td>'.$data['reporter'].'</td>
                        <td>'.$data['org'].'</td>
                        <td>'.$data['trackside'].'</td>
                        <td>'.$data['location'].'</td>
                        <td>'.$data['number'].'</td>
                        <td>'.$data['breach_rule'].'</td>
                        <td>'.$data['life_rule'].'</td>
                        <td>'.$data['require_feed'].'</td>
                        <td>'.$data['email'].'</td>
                        <td>'.get_region_id($data['region']).'</td>
                        <td>'.$data['closed_out'].'</td>
                        <td>'.$data['rssb_num'].'</td>
                        <td style="display:none;" class="closeID">'.$data['id'].'</td>
                        <td style="display:none;">'.$data['file_upload'].'</td>
                    </tr>

If you can help that would be great. Thanks for your time.

Please could you provide a snippet of your HTML, as a "*[mcve]*," that way it's likely to be easier for us to see what's going on (and any problems you may have) as we form our answers to the question? — David Thomas, Jan 23 '17 at 19:01
@DavidThomas I have added one of my table rows I hope this helps. — dawigster, Jan 23 '17 at 19:04
An id should be unique in a page so `$("#closeID:contains(2)").closest('tr').addClass('selected');` should be enough. — Dominique Fortin, Jan 23 '17 at 19:08
If you have more than one element with the same id, than you are doing something wrong since ids are singular. You should be using a class, not an id. — epascarello, Jan 23 '17 at 19:08
@DominiqueFortin I have now changed it to a class as this is used more then once — dawigster, Jan 23 '17 at 19:12
Possible duplicate of [Select element by exact match of its content](http://stackoverflow.com/questions/15364298/select-element-by-exact-match-of-its-content) — Tyler Roper, Jan 23 '17 at 19:13
@epascarello Thank you for pointing that out I have changed the id to a class it hasn't changed anything. — dawigster, Jan 23 '17 at 19:13

score 0 · Answer 1 · answered Jan 23 '17 at 19:13

You could loop through each cell in your table and check the value. I'd recommend using plain javascript over jQuery for this (it'll run much quicker)

var table = document.getElementById('your-table-id');

var rows = table.getElementsByTagName('tr');

for (var row = 0; row < rows.length; row++) {

  var cells = rows[row].getElementsByTagName('td');

  for (var cell = 0; cells < cells.length; cell++) {

    if (cell.innerHTML === 'the string your looking for'){
      jQuery(rows[row])
        .parent('tr')
        .addClass('selected');
    }
  }
}

this looks perfect is there a way to change it so it only looks at the cell with a class of closeID? — dawigster, Jan 23 '17 at 19:17

Dominique Fortin · Answer 2 · 2017-01-23T19:24:41.567

0

try

$(".closeID").filter(function(i,DOM){ 
     return (/*condition here*/);
   })
   .closest('tr')
   .addClass('selected')‌;

The first part $(".closeID"), gets you the list off all the tags with the closeID css class. Then the filter function lets you choose which you want. Then the last part lets you make the modification you want.

edited Jan 23 '17 at 19:24

answered Jan 23 '17 at 19:17

Dominique Fortin

2,212
15
20

how do I compare a value against .closeID ? – dawigster Jan 23 '17 at 19:19

score 0 · Accepted Answer · answered Jan 23 '17 at 19:18

0

There is no way to do an exact match test, so you will need to loop over the collection and checking the value.

$(".closeID").filter( function () {
    return $.trim( $(this).text() ) == "1";
}).closest("tr").addClass("selected");

over option, use a data attribute instead of using text in a TD. This way you can just reference it with a simple selector.

<tr data-id="10">

and just use an attribute selector

$('tr[data-id="10"]').addClass("selected");

answered Jan 23 '17 at 19:18

epascarello

204,599
20
195
236

this works perfectly I have used the attribute selector and its works like a charm thank you for your help – dawigster Jan 23 '17 at 19:28

Find exact value in cell of a table and add class to row

3 Answers3