How to get value of a specific cell of a table thats from a different host

Question

As the Title reads..

I'm trying to collect specific cell information from an external website's table. I want to then display the value in my own table's cell. This is to be done on an event such as pushing an "update" button.

The external site formats their table like this:

<table class="data-table">
        <tr>
            <td class="label">jhgjghgf:</td>
            <td class="data">0.20079</td>
            <td class="spacer"><span></span></td>
            <td class="label">hdfxshgx:</td>
            <td class="data">-0.383</td>
        </tr>
        <tr>
            <td class="label">kjhgk:</td>
            <td class="data">90.008</td>
            <td class="spacer"><span></span></td>
            <td class="label">kjhg:</td>
            <td class="data">N/A</td>               
        </tr>
</table>

Let's say I'm trying to collect just Row 2 Col 2, then display the value in my own table. What can I do?

Sorry, I haven't begun to code yet as the entirety of my site depends if I/we can get this working.

Answer 1

With jQuery, you can get this value as follows:

$('.data-table tr:nth-child(2) td:nth-child(2)').text()

If you want to request the external site's table via AJAX and then get the value from the table, you can do so like this:

$.get(<url of external site>).function(result) {
     var value = $(result).('.data-table tr:nth-child(2) td:nth-child(2)').text();
     // now add this value to your table, e.g. $('.my_table td')[0].text(value);
};

Answer 2

You are going to need to do this via the server language library (ie: via Coldfusion http() or PHP HttpRequest() ).

You could do this via pure js (via ajax/jQuery) but ONLY if you have cross browser rules and access files setup (ie: the OTHER site(s) you are mining need to give you permission, see https://www.bionicspirit.com/blog/2011/03/24/cross-domain-requests.html for a bit more info).

Some older browsers might let you get away with x-browser requests, but newer ones will not.

If you can get past that issue, then jQuery would be simplest using its CSS based selectors from the resulting request (if you can end up using jQuery ajax):

myData = $('.data-table tr:nth-child(2) td:nth-child(2)');

This would get any 2nd row, 2nd table cell element as a jQuery wrapped set.

Answer 3

I would do this on server side. You got to request the html page on the other host, find the cell you want and send it back to your website.

I don't know what language you're using, but you can easily find some librairies that allow you to parse html like you would do in jquery but lets say in php.

Answer 4

Alright you can use jquery and proceed like this

function getRowData(row,col)
{
  var rows = $('.data-table tr');
  var cols =$(rows[row],'td');

 return   cols[col];

}

this will return you the 'td' with specified row and col no

you can get its value using

getRowData(1,1).html();

hope this helps

Answer 5

What you are trying to achieve here is considered dangerous and should be avoided.

Ignore the answers from newbies that ask you to try AJAX to get contents of external site. It is not possible due to the Same Origin Policy implemented by browsers. ie you cannot make an AJAX request to any other website from your site.

There are ways to include page from other sites using iframes but I won't recommend that either.

Your best bet is to rely on server side technology to fetch the page in question and then parse it and get the values your require.

Since you didn't mention any server side technology, I cannot give you any code example.