Как получить содержимое из XML с помощью JQUERY и отобразить его в таблице?

Question

Я хочу вывести данные из файла XML в таблицу, например:

<table>
<th>Head 1</th><th>Head 2</th><th>Head 3</th>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>

Все 3 столбца таблицы будут заполнены данными из файла XML. Я пробовал, но могу видеть только одни данные из файла, но все строки должны быть заполнены уникальными данными. Кроме того, как только JQUERY загружает данные, «заголовок таблицы» не отображается, вместо этого отображаются данные из самого файла.

И когда «новый XML» файл будет добавлен в В папке данные из более старого файла XML должны быть удалены, а данные из нового файла должны отображаться на экране.

Ниже я добавил свой фрагмент кода. HTML файл

<div>
    <table class="status_table">
        <th class="table_heading">Heading 1</th>
        <th class="table_heading" style="text-align:center; padding:30px;">Heading 2</th>
        <th class="table_heading" style="text-align:center; padding:30px;">Heading 3</th>
        <tr></tr>
    </table>
</div>

JQUERY файл

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

$(document).ready(function(){
    truckData();
    fetch();
})
function fetch(){
    setTimeout(function(){
        truckData();
        fetch();
    },100)
}

function truckData(){
$.ajax({
  url: "20200707083610.xml",
  dataType: "",
  success: function(data){

    $("tr").children().remove();
    $(data).find("DisplayData").each(function(){
      var info = '<td class="table_content" style="color: #DB075C;">'+$(this).find("LaneName").text()+'<td class="table_content" style="color: #FFFF00;">'+$(this).find("PlateNumber").text()+'<td class="table_content" style="color: #3107DB;">'+$(this).find("BayName").text();

      $("tr").append(info);
    });
  }
})
}

XML Файл

<DisplayRequestData>
        <DisplayData displayPort="d-01">
            <LaneName>Lane 1</LaneName>
            <PlateNumber>7709</PlateNumber>
            <BayName>ABCD 1</BayName>
        </DisplayData>
        <DisplayData displayPort="d-02">
            <LaneName>Lane 2</LaneName>
            <PlateNumber>5652</PlateNumber>
            <BayName>XYZA 0012</BayName>
        </DisplayData>
        <DisplayData displayPort="d-03">
            <LaneName>Lane 3</LaneName>
            <PlateNumber>XR-20398</PlateNumber>
            <BayName></BayName>
        </DisplayData>
</DisplayRequestData>

Answer 1

Вы можете использовать += для добавления новых строк, в настоящее время ваш код просто добавляет строку в tr. Вместо этого вы можете использовать tbody и добавить trs внутри этого тела. Кроме того, вы можете дать dataType: "xml" в ajax вызов, когда вы возвращаете xml файл в качестве ответа.

Демо Код :

//your xml
var data = '<DisplayRequestData><DisplayData displayPort="d-01"><LaneName>Lane 1</LaneName><PlateNumber>7709</PlateNumber><BayName>ABCD 1</BayName> </DisplayData><DisplayData displayPort="d-02"><LaneName>Lane 2</LaneName><PlateNumber>5652</PlateNumber><BayName>XYZA 0012</BayName></DisplayData> <DisplayData displayPort="d-03"><LaneName>Lane 3</LaneName> <PlateNumber>XR-20398</PlateNumber> <BayName></BayName></DisplayData></DisplayRequestData>'
var info = "";
//parse xml (this is not needed if you have specified response as xml )
$xml = $($.parseXML(data));
//loop through data
$xml.find("DisplayData").each(function() {
  //append rows
  info += '<tr><td class="table_content" style="color: #DB075C;">' + $(this).find("LaneName").text() + '<td class="table_content" style="color: #FFFF00;">' + $(this).find("PlateNumber").text() + '<td class="table_content" style="color: #3107DB;">' + $(this).find("BayName").text() + '</tr>';
});
//add rows inside tbody
$("table tbody").html(info);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table class="status_table">
    <thead>
      <th class="table_heading">LaneName</th>
      <th class="table_heading" style="text-align:center;">PlateNumber</th>
      <th class="table_heading" style="text-align:center; ">BayName</th>
    </thead>
    <tbody>
   <tr></tr>
    </tbody>
  </table>
</div>