How to parse html in external file from Javascript
I feel like I should know this, but when I'm sitting trying to access an html file from my Javascript, I don't know where to start. I am using jQuery so I just want to use jQuery.ajax ()?
External html is a table with different premium values stored in the same domain but in a separate directory. When the user enters their year of birth earlier in the form and selects whether 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 would like to return the value in cell mns 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>
source to share
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'
source to share