CODEWITHSUNDEEP
javascriptjqueryhtml
ganesh kaspate
ganesh kaspate

Reputation: 2685

Select a td from a tr which has the text matching and add class

I am new to web development. I have a table with a simple structure. Here, I want to find a tr containing a td value "abc" and then add the class to that tr. I am able to add it to td but not to the tr . Please help.

var container = document.querySelector("[id^='taTextElement']").id;

var match = "Duration";
$('#'+container +' ' +'table tr').each(function() { }

One more thing here, table Id is also there.So, can anyone please help me with this ?

Here I have not added the ID part.

HTML -

<table border="1"> <tbody><tr><td> Designation :</td><td></td></tr><tr><td> Duration :</td><td>JANUARY 2015 to APRIL 2015</td></tr><tr><td> Technologies : </td><td>Tritium, Sublime Text, Firefox, Chrome, Action Script, HTML, CSS, Javascript, jQuery</td></tr><tr><td> Team Size: </td><td></td></tr><tr><td> URl : </td><td></td></tr><tr><td> Employer :</td><td></td></tr><tr><td> Client : </td><td></td></tr><tr><td> Domain : </td><td></td></tr><tr><td> Roles and responsibility : </td><td>Contribution:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Using Client API in this project had to fix many issues while mobilizing the desktop site  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Code validation, Unit testing, Manual testing done for every task. &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;  &nbsp;</td></tr><tr><td> Description: </td><td>Description:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; As a part of this project we were mobilize the desktop websites.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr></tbody></table>

Upvotes: 2

Views: 2080

Answers (3)

Eddie
Eddie

Reputation: 26844

You can use :contains selector like:

$(function() {
  var toSearch = "Island"; /* Word to seach */
  $("#table1 td:contains(" + toSearch + ")").parent().addClass('selected');
});
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.selected {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

For exact search, you can use filter

You can use:

var toSearch = "Francisco Chang"; /* Word to seach */
$("#table1 td").filter(function(){ return $(this).text().trim() === toSearch }).parent().addClass('selected');

Upvotes: 1

RobG
RobG

Reputation: 147343

As a comparison, you can do this in POJS by:

  1. Getting the cells in the table as an array (or NodeList with forEach, see below)
  2. Loop over the cells and add a 'highlight' class to rows that contain matching text

Since most browsers now implement forEach on NodeLists, you can call it on the NodeList returned by querySelectorAll. Otherwise, you may need to convert the NodeList to an array first (e.g. use Array.from(NodeList)).

function highlighTRWithText(text) {
  document.querySelectorAll('#table0 td')
    .forEach(cell => { 
      if (cell.textContent.indexOf(text) > -1) cell.parentNode.classList.add('highlight');
    });
}

window.onload = function(){
  highlighTRWithText('Team Size');
}
.highlight {
  background-color: red;
}
<table id="table0" border="1">
  <tbody>
    <tr>
      <td> Designation :</td>
      <td></td>
    </tr>
    <tr>
      <td> Duration :</td>
      <td>JANUARY 2015 to APRIL 2015</td>
    </tr>
    <tr>
      <td> Technologies : </td>
      <td>Tritium, Sublime Text, Firefox, Chrome, Action Script, HTML, CSS, Javascript, jQuery</td>
    </tr>
    <tr>
      <td> Team Size: </td>
      <td></td>
    </tr>
    <tr>
      <td> URl : </td>
      <td></td>
    </tr>
    <tr>
      <td> Employer :</td>
      <td></td>
    </tr>
    <tr>
      <td> Client : </td>
      <td></td>
    </tr>
    <tr>
      <td> Domain : </td>
      <td></td>
    </tr>
    <tr>
      <td> Roles and responsibility : </td>
      <td>Contribution:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Using Client API in this project had to fix many issues while mobilizing the desktop site &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Code validation, Unit testing, Manual testing
        done for every task. &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;</td>
    </tr>
    <tr>
      <td> Description: </td>
      <td>Description:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; As a part of this project we were mobilize the desktop websites. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Jtbs
Jtbs

Reputation: 301

If you are able to select the td, you can use the jQuery.parent () method to get the tr and add the class.

So in your .each function

var tds = $(this).children ().filter (function(){return $(this).text () == 'abc';});
tds.each (function (){
  $(this).addClass (yourClass) ; 
  $(this).parent ().addClass (trClass);
});

Upvotes: 0

Related Questions