Find td with specific text, and operate on the td

问题:

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 ?

回答1:

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.

回答2:

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>

回答3:

jQuery has :contains() pseudo class :

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

Be carefull, :contains is case sensitive.

回答4:

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/

回答5:

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");
  }
}

回答6:

for information

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