How do I parse html in an external file from Javascript

Question

I feel like I should know this, but as I'm sitting down trying to access an html file from my Javascript I don't really know where to start. I am using jQuery so do I just want to use jQuery.ajax()?

The external html is a table with various premium values, stored on the same domain but in a separate directory. When a user enters their birth year previously in the form and selects whether or not they are male or female and a smoker or non-smoker, I return specific values based on their age.

In the table below if they were 21, male, non-smoker i'd want to return the value in the mns cell from row #id21.

<table id="premiumRateTable" cellpadding="0" cellspacing="0" border="0">
    <thead>
        <tr>
            <th id="age">Age Next Birthday</th>
            <th id="cover">Default Cover</th>
            <th id="mns">Male Non-smoker</th>
            <th id="ms">Male Smoker</th>
            <th id="fns">Female Non-smoker</th>
            <th id="fs">Female Smoker</th>
        </tr>
    </thead>
    <tbody>
        <tr id="id20">
            <td headers="age">20</td>
            <td headers="cover">$100,000</td>
            <td headers="mns">$108.99</td>
            <td headers="ms">$154.55</td>
            <td headers="fns">$44.31</td>
            <td headers="fs">$68.61</td>
        </tr>
        <tr id="id21">
            <td headers="age">21</td>
            <td headers="cover">$150,000</td>
            <td headers="mns">$160.81</td>
            <td headers="ms">$229.15</td>
            <td headers="fns">$58.16</td>
            <td headers="fs">$77.48</td>
        </tr>
        <tr id="id22">
            <td headers="age">22</td>
            <td headers="cover">$150,000</td>
            <td headers="mns">$139.37</td>
            <td headers="ms">$199.167</td>
            <td headers="fns">$58.28</td>
            <td headers="fs">$72.89</td>
        </tr>
        <tr id="id23">
            <td headers="age">23</td>
            <td headers="cover">$150,000</td>
            <td headers="mns">$128.64</td>
            <td headers="ms">$183.59</td>
            <td headers="fns">$56.28</td>
            <td headers="fs">$72.89</td>
        </tr>
        <tr id="id24">
            <td headers="age">24</td>
            <td headers="cover">$150,000</td>
            <td headers="mns">$121.94</td>
            <td headers="ms">$172.87</td>
            <td headers="fns">$58.29</td>
            <td headers="fs">$79.90</td>
        </tr>
        <tr id="id25">
            <td headers="age">25</td>
            <td headers="cover">$150,000</td>
            <td headers="mns">$112.56</td>
            <td headers="ms">$158.13</td>
            <td headers="fns">$61.11</td>
            <td headers="fs">$84.91</td>
        </tr>

    </tbody>
</table>

In what capacity do you need to parse it? You can use any ajax method to get the raw emission from that request on the same domain. — Explosion Pills
– Explosion Pills, Commented Feb 16, 2013 at 4:10

Phil Bozak · Accepted Answer · 2013-02-16 06:52:06Z

4

Load the table once ($(document).ready()) and add it to an invisible element at the end of the body.

var dummyDiv = $("<div id='dummyDiv'/>").css("display","none");
dummyDiv.load("otherpage.html #id"+age);
dummyDiv.css("display","none");
$("body").append(dummyDiv);

And then you can run this code from anywhere to get the values from that table.

var dummyDiv = $("#dummyDiv");
var valYouWant = "mns"; //example value to grab
var value = dummyDiv.find('td[headers="'+valYouWant+'"]').text();
//do whatever you'd like with 'value'

edited Feb 16, 2013 at 6:52

answered Feb 16, 2013 at 4:11

Phil Bozak

2,8401 gold badge21 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

timmackay Over a year ago

Can I store the result of jQuery.load() in a variable and then only display part of it depending on some conditions met in Javascript?

Phil Bozak Over a year ago

This doesn't seem to do what you want based on your revised question. Also, if you have no reason to store the data as an HTML table other than for this function, storing it as json may be easier to work with. (Again, depending on what you want to do with it). I will edit my answer to be more of what you're looking for.

Talha Akbar Over a year ago

@hyperdouche you can get part of that document like: $("body").load("index.html #content");

timmackay Over a year ago

So instead of saving the whole html structure as a variable in the js, do you reckon I should only access it when all selections have been made in the form? I'm not exactly sure what '$([select display element])' refers to above.

Phil Bozak Over a year ago

See my edits. It wasn't clear to me what you wanted to do with the data after you fetched it.

|

Collectives™ on Stack Overflow

How do I parse html in an external file from Javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related