Find td with specific text, and operate on the ALL td's on its right?

Question

This may seem a little similar to my last question (Find td with specific text, and operate on the td right after that one?), but this is a different actually ..

I have a table like this, this time:

<table class="test">
  <tr>
    <td>Row 1</td><td>Text 1-1</td><td>Text 1-2</td> ...... <td>Text 1-n</td>
  </tr>
  <tr>
    <td>Row 2</td><td>Text 2-1</td><td>Text 2-2</td> ...... <td>Text 2-n</td>
  </tr>
  <tr>
    <td>Row 3</td><td>Text 3-1</td><td>Text 3-2</td> ...... <td>Text 3-n</td>
  </tr>
  <tr>
    <td>Row 4</td><td>Text 4-1</td><td>Text 4-2</td> ...... <td>Text 4-n</td>
  </tr>
  <tr>
    <td>Row 5</td><td>Text 5-1</td><td>Text 5-2</td> ...... <td>Text 5-n</td>
  </tr>
</table>

Basically it has rows, and now it has an unlimited number of columns.

I need to right a td with a specific text, and then operate on ALL tds on its right. The text to find will always be from tds on the left most side, as it will be a row heading text.

So for example, I may want to find a td with text Row 3, and then I will need to append xyz to the texts of all tds on the right of this td (which contains text Row 3) ..

So in my example, all tds on the right of td containing Row 3 will have their texts changed:

Text 3-1 --> Text 3-1xyz
Text 3-2 --> Text 3-2xyz
.
.
.
Text 3-n --> Text 3-nxyz

How do I solve this one ?

reading the manual to see what jquery's capable of would be a good start: http://api.jquery.com/category/traversing/tree-traversal/ DOM's a tree, and standard tree manipulation methods, including finding nearby related elements, are what you need. — Marc B, Jan 24 '14 at 19:41
Use the same but instead of `next` use `nextAll` or `siblings` http://jsfiddle.net/h4Txd/1/ — DaniP, Jan 24 '14 at 19:42
Thanks .. nextAll() did the trick ! :D .. If you make an answer, I'll mark it ! — Ahmad, Jan 24 '14 at 19:49

score 1 · Accepted Answer · answered Jan 24 '14 at 19:49

There are other kind of resources that will let you select elements on the DOM like nextAll() or siblings(), based on the code you already have just change that:

$(".test td:contains(Row 3)")
.nextAll().text(function(){
    return $(this).text() + "xyz"
});

user2226755 · Answer 2 · 2014-01-24T20:05:01.767

With jquery you can use contains selector but it's not suitable, use jQuery.each().

$("table.test td").each(function() {
  if ($(this).html() == "Text 2-1")
    $(this).append("xyz");
});

http://jsbin.com/IrEpeTE/1/edit

For row use "eq()", get 5th rows like this :

$("table.test tr:eq(4) td").each(function() {
   if ($(this).html()!="Row 5")
       $(this).append("xyz");
});

or :

$("table.test tr td").each(function() {
  if ($(this).parent().children().html()=="Row 5" && $(this).html()!="Row 5")
       $(this).append("xyz");
});

Find td with specific text, and operate on the ALL td's on its right?

2 Answers2