没有将行添加到表中-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 中的内置函数

另外，async函数似乎没有必要，因为您没有使用await。

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