行没有被添加到表中 - javascript

Question

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

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

它按预期在控制台中工作，但是行并没有添加到表中，我收到以下错误：

Uncaught (in promise) ReferenceError: add_row is not defined

我该如何解决这个问题并为我的数据制作一个动态表？

Answer 1

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

由于您没有使用 await，因此似乎没有必要使用 async 函数。

Answer 2

您可以简单地将 innerHTML 附加到表格中。用<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']);