Question

行未添加到表中 - javascript

2021-08-28

76

javascript jquery twitter-bootstrap web3js

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

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