简体   繁体   中英

Find a word in a table cell then extract text from the next cell

Please take a look at this Fiddle example . I'm working on a ajax script to parse a JSON file. One of the items (B item) in the JSON file contains the word "Sodium" in its table and I can use this script to print the table:

$.ajax({
    url: "url.json",
    success: function (data) {

        $(data.query.results.json.json).each(function (index, item) {         
         var title = item.title;
         var table = item.table; 
            if (table.indexOf("Sodium") >= 0){
         $('.'+ title+'table').html(''+table+'')
            }
        });
    },
    error: function () {}
});

Since it can find the word "Sodium" in the table, I wonder if it's possible to locate which td the word is in and then find its next closest td to extract the Sodium amount which in this case is 1200 mg ? Would something like .closest('td').text(); work? But how to choose the selector?

JSON File

[{"title":"A","table":"<table class=\"tablesorter\"><thead><tr><td >Ingredient<\/td><td >Amount<\/td><td>% Daily Value**<\/td><\/tr><\/thead><tbody><tr><td>Calories<\/td><td>10<\/td><td>&nbsp;<\/td><\/tr><tr><td>Total Carbohydrate<\/td><td>2g<\/td><td>&lt;1<\/td><\/tr><tr><td>Vitamin C<\/td><td>110mg<\/td><td>4<\/td><\/tr><tr><td>Potassium<\/td><td>235mg<\/td><td>6<\/td><\/tr><tr><td>Omega 6<\/td><td>1100mg<\/td><td>*<\/td><\/tr><tr><td>Vitamin B<\/td><td>1200mg<\/td><td>*<\/td><\/tr><tr><td>Vitamin E<\/td><td>300mg<\/td><td>*<\/td><\/tr><\/tbody><\/table>"},{"title":"B","table":"<table class=\"tablesorter\"><thead><tr><td >Ingredient<\/td><td >Amount<\/td><td>% Daily Value**<\/td><\/tr><\/thead><tbody><tr><td>Calories<\/td><td>10<\/td><td>&nbsp;<\/td><\/tr><tr><td>Total Carbohydrate<\/td><td>2g<\/td><td>&lt;1<\/td><\/tr><tr><td>Vitamin C<\/td><td>110mg<\/td><td>4<\/td><\/tr><tr><td>Potassium<\/td><td>245mg<\/td><td>6<\/td><\/tr><tr><td>Fish Oil<\/td><td>1100mg<\/td><td>*<\/td><\/tr><tr><td>Sodium (from Kitchen Salt)<\/td><td>1200mg<\/td><td>*<\/td><\/tr><tr><td>Vitamin E<\/td><td>300mg<\/td><td>*<\/td><\/tr><\/tbody><\/table>"}]

Table Structure:

<table class="tablesorter">
<thead>
<tr>
<td>Ingredient</td>
<td>Amount</td>
<td>% Daily Value**</td>
</tr>
</thead>
<tbody>
<tr>
<td>Calories</td>
<td>10</td>
<td></td>
</tr>
<tr>
<td>Total Carbohydrate</td>
<td>2g</td>
<td>&lt;1</td>
</tr>
<tr>
<td>Vitamin C</td>
<td>110mg</td>
<td>4</td>
</tr>
<tr>  //************************
<td>Sodium (from Kitchen Salt)</td>
<td>1200mg</td>
<td>6</td>
</tr>  //*************************
<tr>
<td>Omega 6</td>
<td>1100mg</td>
<td>*</td>
</tr>
<tr>
<td>Vitamin B</td>
<td>1200mg</td>
<td>*</td>
</tr>
<tr>
<td>Vitamin E</td>
<td>300mg</td>
<td>*</td>
</tr>
</tbody>
</table>

You could simply search through the parsed HTML using jQuery :contains() selectors:

$.ajax({
    url: "url.json",
    success: function (data) {

        $(data.query.results.json.json).each(function (index, item) {         
            var title = item.title;
            var table = item.table; 
            if (table.indexOf("Sodium") >= 0) {
                $('.'+ title+'table').html(''+table+'');
                alert($('.'+title+'table').find('td:contains(Sodium)').next().html());
            }
        });
    },
    error: function () {}
});

Demo .

That alert call will alert the contents of the td after the one that contains Sodium in its text.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM