Read an HTML file data to generate a new html File

I am trying to Create a HTML report. In this at run time of execution of my code i create a HTML file which has details of report in table format and some labels.

Now my HTML Report should read the file as in col-row format so that i can traverse to required data and get the same in my HTML Report.

my new Report

<tr><td>
<a " href=./" target="_top">All Test</a><br>
<a " href=./" target="_top">All Errors</a><br> ......
</td><td><table>{Here the data should be generated as per click on the above link}</table></td>

The data should be generated by reading the HTML file and when in clicks the Link (eg.Alltest)

And i am not getting what to write in front of href in the link.

UPDATE: Create a HTML page which is created from data of another HTML file. In other words i want to add a table which create the contents of it dynamically on click event of the link, and the contents are stored in another HTML file.

UPDATE2:

1. On Load ALLTest link will be active and data will be loaded in table from another HTML file.

2. If the user clicks the Allerror Link the rows containing status error in HTML file should be load开发者_运维百科ed in table.

UPDATE3:

$(document).ready(function(){
 $("button").click(function(){
  $.ajax({url:"report.html", success:function(result){
   result=*{updated result}*
   $(".mytable").html(result);
  }});
});});

Thanks in Advance.

From looking at your code sample and the provided tags, I assume you're trying to generate the contents of the TABLE tag. To do this, you need to fix the HTML code, because your anchor (A) tags do not have a valid href attribute:

<tr><td>
<a href="#" class="showtests">All Test</a><br>
<a href="#" class="showerrors">All Errors</a><br> ......
</td><td><table class="mytable">{Here the data should be generated as per click on the above link}
</table></td>

To make jQuery selections a bit easier, I've added some class attributes. Now you can use the following jQuery script:

$(function() { 
    $(".showtests").click(function() { 
        $(".mytable").load("http://www.mysite.com/tests.html");
        $(".mytable TD:nth-child(3):not(':contains(\'test\')')").parent().remove();   
    });
    $(".showerrors").click(function() { 
        $(".mytable").load("http://www.mysite.com/errors.html");
        $(".mytable TD:nth-child(3):not(':contains(\'error\')')").parent().remove();   
    });
});

After the HTML rows are loaded into the table, the rows not containing the right status ("test" or "error") are removed. This example checks the third column, which you can adjust by updating nth-child(3) with the correct column index.