Прочитайте данные HTML-файла, чтобы сгенерировать новый HTML-файл

Question

Я пытаюсь создать отчет в формате HTML. В этом во время выполнения моего кода я создаю HTML-файл, который содержит детали отчета в табличном формате и некоторые метки.
Теперь мой HTML-отчет должен прочитать файл в формате строки, чтобы я мог перейти к требуемым данным и получить то же самое в своем HTML-отчете.

мой новый отчет

<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>

Данные должны быть получены путем чтения HTML-файла и при нажатии на ссылку (например, Alltest)

И я не получаю, что написать перед href в ссылке.

ОБНОВЛЕНИЕ: Создать страницу HTML, которая создается из данных другого файла HTML. Другими словами, я хочу добавить таблицу, которая динамически создает ее содержимое при событии щелчка ссылки, и содержимое сохраняется в другом HTML-файле.

UPDATE2:
1. При загрузке ссылка ALLTest будет активной, и данные будут загружены в таблицу из другого HTML-файла.
2. Если пользователь щелкает ссылку Allerror, строки, содержащие ошибку состояния в файле HTML, должны быть загружены в таблицу.

ОБНОВЛЕНИЕ3:

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

Заранее спасибо.

Answer 1

Изучив пример кода и предоставленные теги, я предполагаю, что вы пытаетесь сгенерировать содержимое тега TABLE.Для этого вам нужно исправить HTML-код, потому что у ваших якорных (A) тегов нет действительного атрибута href:

<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>

Чтобы сделать выборки jQuery немного проще, я добавил некоторые атрибуты класса.Теперь вы можете использовать следующий скрипт jQuery:

$(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();   
    });
});

После того, как строки HTML загружены в таблицу, строки, не содержащие нужный статус («test» или «error»), удаляются.В этом примере проверяется третий столбец, который можно настроить, обновив nth-child(3) с правильным индексом столбца.