CODEWITHSUNDEEP
javascriptjqueryhtml
barteloma
barteloma

Reputation: 6855

How to find find value in table cell value with jquery

I have a table html code that comes from out source via ajax like this:

<table class="stripped">
    <tr class="red">
        <td style="font-weight:bold;">City</td>
        <td class="red">xyz</td>
    </tr>
    <tr class="red">
        <td style="font-weight:bold;">Country</td>
        <td class="red">abc</td>
    </tr>
    <tr class="red">
        <td style="font-weight:bold;">Date</td>
        <td class="red">05.10.2017</td>
    </tr>
</table>

<table class="stripped">
    <tr class="red">
        <td style="font-weight:bold;">Category</td>
        <td class="red">This is category</td>
    </tr>
</table>

I want to get value of country value in this html. Jquery nth-child can find but I could not find. I find nht tr item but can not find value ("abc") of country.

Upvotes: 0

Views: 54

Answers (5)

Ricardo Padua Soares
Ricardo Padua Soares

Reputation: 447

Code: http://tpcg.io/Vy9IwJ

<script>
$(document).ready(function() {
    $(".stripped td").get().forEach(function(entry, index, array) {
        if ($(entry).text()=='Country') {
            $('#result').html( $('#result').html()+'Country: '+$(entry).next().text() );
        }
    });
});
</script>
<div id="result">
</div> 
<table class="stripped">
    <tr class="red">
        <td style="font-weight:bold;">City</td>
        <td class="red">xyz</td>
    </tr>
    <tr class="red">
        <td style="font-weight:bold;">Country</td>
        <td class="red">abc</td>
    </tr>
    <tr class="red">
        <td style="font-weight:bold;">Date</td>
        <td class="red">05.10.2017</td>
    </tr>
</table>
<table class="stripped">
    <tr class="red">
        <td style="font-weight:bold;">Category</td>
        <td class="red">This is category</td>
    </tr>
</table>

Upvotes: 0

zfrisch
zfrisch

Reputation: 8660

The only real reference point besides nth-child is your text headings.

Since this is the case we can just look through your table cells for the heading Date and then get the text from the following cell (that cell's index + 1).

It should be pointed out that this is less than ideal. This solution, like every other one we can offer given the circumstances, can very easily be defeated if mark-up changes in the future. Just something to keep in mind, though I do understand that sometimes you have no choice. 

$("td").each(function(ind, ele) {
if(ele.textContent === "Date"){
console.log("date is", $("td").eq(ind+1).text() );
}});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="stripped">
    <tr class="red">
        <td style="font-weight:bold;">City</td>
        <td class="red">xyz</td>
    </tr>
    <tr class="red">
        <td style="font-weight:bold;">Country</td>
        <td class="red">abc</td>
    </tr>
    <tr class="red">
        <td style="font-weight:bold;">Date</td>
        <td class="red">05.10.2017</td>
    </tr>
</table>

<table class="stripped">
    <tr class="red">
        <td style="font-weight:bold;">Category</td>
        <td class="red">This is category</td>
    </tr>
</table>

Upvotes: 0

Marta G.
Marta G.

Reputation: 36

How about following selector:

  $( "table.stripped tr:nth-child(2) td:nth-child(2)" ).val();

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

Not sure what you want to do with it, but if you want to get the second td of a tr that contains Country, use the following $("table tr:contains(Country) td:eq(1)").text()

Demo

var text = $("table tr:contains(Country) td:eq(1)").text();
console.log(text)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="stripped">
    <tr class="red">
        <td style="font-weight:bold;">City</td>
        <td class="red">xyz</td>
    </tr>
    <tr class="red">
        <td style="font-weight:bold;">Country</td>
        <td class="red">abc</td>
    </tr>
    <tr class="red">
        <td style="font-weight:bold;">Date</td>
        <td class="red">05.10.2017</td>
    </tr>
</table>

<table class="stripped">
    <tr class="red">
        <td style="font-weight:bold;">Category</td>
        <td class="red">This is category</td>
    </tr>
</table>

Upvotes: 2

exeraph
exeraph

Reputation: 81

 let country = document.querySelectorAll("tr")[1].querySelectorAll("td")[1].innerText;

 document.querySelectorAll("tr")[1] (second tr)
 .querySelectorAll("td")[1] (second td in second tr)
 .innerText (gets value)

Upvotes: 0

Related Questions