Question

I have written a piece of JavaScript so that when a user hovers over a specific piece of text in an a website, this pops up with a table.

Currently the tables content is hard coded with a couple of words for debugging purposes, and it appears as as desired.

The content html looks like –

<tr>
  <th>Name</th>
  <th>Age</th>
</tr>

<tr>
  <td>Jambo</td>
  <td>22</td>
</tr>

So the tables content shows the aforementioned.

I now want to make the content of the table based on the content of a report that is viewed by accessing a URL.

I did try this –

<tr>
  <td><a href="url">Link text</a></td>
</tr>

But of course this only provides a link to the report and not actually opens the content.

How can I do this?

Answer 1

An absolute horrendous but quick way of doing this would be:

1. Ajax Request your url
2. Get table data with html tags as ajax responseText
3. document.getElementById(‘yourmouseoverdivid‘).innerHTML = responseText

Another better way would be:

1. Using ajax fetch you table data as json
2. Create nested tabular html elements using javascript and the fetched json Eg: document.createElement(‘table’)
3. Append those elements to document.getElementById(‘yourmouseoverdivid‘)