添加新元素时将 XML 实时转换为 HTML 表

Question

我每秒都有 xml 数据的 json 和 ajax 代码。它的工作很酷。当我添加 xml 元素时，它会自动添加到 html 表中。我的问题是，当我每 3 秒调用一次函数时，html 页面刷新效果，因为新元素添加到表中所以它烦人的视图每 3 秒刷新一次页面。所以我想添加新元素添加代码将工作 1 次并将新的 td 元素添加到表中。它的客户信息屏幕位于自助服务咖啡馆程序中，因此当卖家在他的位置添加新商品时它将在客户监视器上显示的程序。 谢谢。抱歉我的英语不好。

<script>

 $(document).ready(function() {
        //
       
            setInterval(function() {
            $('#tableBody').empty();       
            //ajax call to load XML and parse it
            $.ajax({
                type: 'GET',
                url: '01.xml',          
                dataType: 'xml',    
                success: function(xml) {
                   
                    $(xml).find('dsname').each(function() {
                        
                  
                        $('#tableBody').append(
                            '<tr>' +
                                '<td>' +
                                    $(this).find('STOKADI').text() + '</td> ' +
                                '<td>' +
                                    $(this).find('BORC').text() +'₺'+ '</td> ' +
                                
                            '</tr>');
                    });
                }
            });
             }, 3000);
        });

    
</script>





        
        <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="plugins/datatables/jquery.dataTables.min.js" type="text/javascript"></script>
        <script src="plugins/datatables/dataTables.bootstrap.min.js" type="text/javascript"></script>         
        <script type="text/javascript">
      
            
  </script> 

我想检查何时在 XML 中添加新元素，然后我想运行该函数。

Answer 1

解决此问题的一种方法是将类添加到

stokadi

和

borc

表格单元格，然后在添加之前检查 xml 中的每个值是否已在表格中

const updateTable = (xml) => {
  $(xml).find('dsname').each(function() {
    const stokadi = $(this).find('STOKADI').text()
    const borc = $(this).find('BORC').text()
    // if you want to check both values, use this instead:
    // if (!$(`.stokadi:contains(${stokadi})`).length && !$(`.borc:contains(${borc})`).length) {
    if (!$(`.stokadi:contains(${stokadi})`).length) {
      // just logging to show which values get added, remove this for production code
      console.log(`adding stokadi ${stokadi}`)
      $('#tableBody').append(
        `<tr><td class="stokadi">${stokadi}</td><td class="borc">${borc}₺</td></tr>`)
    }
  })
}

let xml = `<root>
<dsname><stokadi>number 1</stokadi><borc>40</borc></dsname>
</root>`

updateTable(xml)

xml = `<root>
<dsname><stokadi>number 1</stokadi><borc>40</borc></dsname>
<dsname><stokadi>number 2</stokadi><borc>15</borc></dsname>
</root>`

updateTable(xml)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>STOKADI</th>
      <th>BORC</th>
    </tr>
    <tbody id="tableBody">
    </tbody>
</table>