未将行添加到 table- javascript

Rows are not beeing added to table- javascript

我这里有这段代码,可以让我从智能合约中获取最新的一对:

document.getElementById("latestPairs").innerHTML = `<table class="table table-dark table-striped table-hover" id="latest"></table>`;
const table = document.getElementById("latest");
     const rowHeader = `<thead>
                            <tr>
                            <th>Token0</th>
                            <th>Token1</th>
                            <th>Pair</th>
                            </tr>
                        </thead>`
     table.innerHTML += rowHeader;


pcsfactoryC.events.PairCreated({fromBlock:'latest'})
.on('data', async function(event){
         //console.log(event.returnValues);
         // Do something here
    let pairs =  event.returnValues    
    let token0 = event.returnValues['token0'];
    let token1 = event.returnValues['token1'];
    let getPair = event.returnValues['pair'];
    console.log(token0 + " " + token1);
    add_row("latest", [event.returnValues['token0'], event.returnValues['token1'], event.returnValues['pair']]);

         
     })
     .on('error', console.error);

它在控制台中按预期工作但是行没有被添加到 table 并且我收到以下错误:

Uncaught (in promise) ReferenceError: add_row is not defined

我该如何解决这个问题并为我的数据创建动态 table?

您必须创建自己的 add_row 函数,因为它不是 js 中的内置函数

另外,async 函数似乎是不必要的,因为您没有使用 await。

您可以简单地将 innerHTML 附加到 table。用 <tr> 包裹每个 ,用 <td>.

包裹每个
function add_row(id, token0, token1, pair){
   var table = document.getElementById(id);
   const rowdata = "<tr><td>"+token0+"</td><td>"+token1+"</td><td>"+pair+"</td></tr>";
   table.innerHTML += rowdata;
}

add_row v2(插入到顶部而不是底部)

function add_row(id, token0, token1, pair){
  var table = document.getElementById(id);
  
  var thead = document.querySelector('#'+id+' thead').innerHTML;

   const firstrowdata = "<tbody><tr><td>"+token0+"</td><td>"+token1+"</td><td>"+pair+"</td></tr></tbody>";
  const rowdata = "<tr><td>"+token0+"</td><td>"+token1+"</td><td>"+pair+"</td></tr>";
  
   if(table.rows.length == 1)table.innerHTML += firstrowdata;
  else{
    var tbody = document.querySelector('#'+id+' tbody').innerHTML;
    table.innerHTML = "<thead>"+ thead + "</thead>" + "<tbody>" + rowdata + tbody + "</tbody>";
  }
}

如果你想测试一下,你需要改变你的调用方式add_row():

/* Removed outer [ ] after ("latest", */
add_row("latest", event.returnValues['token0'], event.returnValues['token1'], event.returnValues['pair']);