未将行添加到 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']);
我这里有这段代码,可以让我从智能合约中获取最新的一对:
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']);