我的目标是得到一个按钮，当点击按钮时应该显示 table ，但是数据是预先显示的，按钮什么都不做

Question

获取 JSON 数据并将其显示在 table 中。下面的代码只是一个骨架结构，但我正在创建的按钮什么也不做，尽管我正在尝试向按钮（单击）添加一个事件，它将根据函数 table 显示 table ]change()。table 在我点击按钮之前已经显示出来了。请帮忙。

var  request= new XMLHttpRequest();
request.open('GET','https://raw.githubusercontent.com/Rajavasanthan/jsondata/master/pagenation.json',true);

request.send();

request.onload=function(){
var data=JSON.parse(request.response);
console.log(data);

var table=document.createElement('table');
table.setAttribute('class','table');
var thead=document.createElement('thead');
thead.setAttribute('class','thead-dark')
var tr=document.createElement('tr');
var tbody=document.createElement('tbody');


var th1=document.createElement('th')
th1.innerHTML='id'
var th2=document.createElement('th');
th2.innerHTML='Name'
var th3=document.createElement('th');
th3.innerHTML='Email';

tr.append(th1,th2,th3);
thead.append(tr);
table.append(thead);


var divis=document.createElement('div');
divis.setAttribute('style','padding:20px');
var button=document.createElement('button');
button.innerHTML="click me";
button.addEventListener('click',tablechange(3));
divis.append(button);
document.body.append(divis);

function tablechange(i=1){
    for(let x=i*5;x<((i+1)*5);x++){
        let k=data[x];
       
    var td1=document.createElement('td');
    var td2=document.createElement('td');
    var td3=document.createElement('td');
    td1.innerHTML=k.id
    td2.innerHTML=k.name;
    td3.innerHTML=k.email;
    var tr=document.createElement('tr');
    if(x%2===0) tr.setAttribute('style','background-color:#d3d3d3');
    tr.append(td1,td2,td3);
    tbody.append(tr);
    table.append(tbody);

document.body.append(table);
}
}
}

Answer 1

您在初始化时调用函数 tablchange(3)，因为您有 () 调用括号。为了让它只在点击时调用，它应该显示为

button.addEventListener('click',tablechange)

当然你不能传递这样的参数，所以你需要将参数设置为你的函数可以访问的变量。

Answer 2

通过 button.addEventListener('click',tablechange(3)); 您可以立即调用函数 tablechange(3)

addEventListener应该是

button.addEventListener("click", tablechange.bind(null,3), false);

我的目标是得到一个按钮，当点击按钮时应该显示 table ，但是数据是预先显示的，按钮什么都不做

My aim is to get a button,when clicked the button the table to should be displayed,but the data is displayed beforehand and the button does nothing

html

javascript

xmlhttprequest