Find td with specific text, and operate on the td right after that one?

Question

I'm not very familiar with jQuery selectors, so would like some help.

I have a table like this:

<table class="test">
  <tr>
    <td>Section Heading 1</td><td>Section Text 1</td>
  </tr>
  <tr>
    <td>Section Heading 2</td><td>Section Text 2</td>
  </tr>
  <tr>
    <td>Section Heading 3</td><td>Section Text 3</td>
  </tr>
  <tr>
    <td>Section Heading 4</td><td>Section Text 4</td>
  </tr>
  <tr>
    <td>Section Heading 5</td><td>Section Text 5</td>
  </tr>
</table>

What I need to do is find the td containing a specific text, and the operate on the text in the td on its right.

For example, say I want to find the td containing the text Section Heading 4, and the concatenate the text contained in the td to it's right, with the text hello, so that Section Text 4 becomes Section Text 4 hello ..

Which jQuery selector(s) can be used for this purpose ?

Chekc [this answer](http://stackoverflow.com/questions/7321896/jquery-find-element-by-text) — alexmac, Jan 24 '14 at 18:12

score 20 · Accepted Answer · 2014-01-24T18:58:00.380

20

My initial answer missed the point about updating the text, here is a sample with this included:

$(".test td:contains(Heading 1)")
    .next().text(function(){
        return $(this).text() + " Hello"
    });

I don't believe you can use the append method as I think it only works to add html tags.

edited Jan 24 '14 at 18:58

answered Jan 24 '14 at 18:12

I have edited my answer after testing it with this jsFiddle http://jsfiddle.net/h4Txd/ – Jan 24 '14 at 18:52

random_user_name · Answer 2 · 2019-01-12T18:06:34.703

First, you want to use :contains:

jQuery( "td:contains(text)" );

Then, you can use .next and .append:

jQuery( "td:contains(text)" ).next().append("Hello");

Here's a working snippet to demonstrate usage:

jQuery(function($) {
  $("td:contains(Text to Find)").next().append(" Hello");
});

table {
  border-collapse: collapse;
}

td {
  border: 1px solid #ccc;
  padding: 2px 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Some Text</td>
      <td>More Text</td>
      <td>YMT</td>
    </tr>
    <tr>
      <td>Text to Find</td>
      <td>Modify:</td>
      <td>Do nothing here</td>
    </tr>
  </tbody>
</table>

@Ahmad - It works. You just have to put the desired text in it, such as: `jQuery("td:contains(Heading 1)")....` — random_user_name, Jan 24 '14 at 19:11

score 4 · Answer 3 · answered Jan 24 '14 at 18:12

4

jQuery has :contains() pseudo class :

$('td:contains("Section Heading 4")').next().text(function(_,t){
    return t + ' Hello';
})

Be carefull, :contains is case sensitive.

answered Jan 24 '14 at 18:12

Karl-André Gagnon

33,662
5
50
75

score 1 · Answer 4 · answered Jan 24 '14 at 18:16

1

This should work...

$(function() {
    var searchText = "Section Heading 3";
    var output = "";
    $("td").each(function(i, item) {
        if($(item).html() == searchText) {
            output = $(item).html();
            output += $(item).closest("td").html()
        }
    });

    console.log(output);
});

Here's a jsFiddle http://jsfiddle.net/5ELLM/

answered Jan 24 '14 at 18:16

xspydr

3,030
3
31
49

1

Nice function. I'd upvote, but the OP specifically asked about a jQuery selector, which you are not using... – random_user_name Jan 24 '14 at 18:26

score 0 · Answer 5 · answered Jan 24 '14 at 18:22

0

var tds=$("table.test").find("td");
var td,i;
for(i=0;i<tds.size();i++) {
  td=tds.eq(i);
  if (td.text().indexOf("Section Heading 4")!=-1) {
    td.next().text(td.next().text()+"hello");
  }
}

answered Jan 24 '14 at 18:22

Alex Jurado - Bitendian

1,027
6
9

score 0 · Answer 6 · answered Apr 08 '18 at 10:38

0

for information

var data ="Search string" $('#table1 td:contains('+data+')').next().text();

answered Apr 08 '18 at 10:38

A.Z. Soft

526
11
12

Find td with specific text, and operate on the td right after that one?

6 Answers6

Linked