Javascript 显示在Html表中的数组

我得到了一个数组的代码，一个javascript中的无限数组，我可以添加更多内容，从中删除其中的更新元素。 我需要在html页面中将该数组显示为一个表。设计不重要，我可以处理它

我只允许使用JavaScript而不是jQuery，我真的不知道该怎么做

让学生=[]；
设x=0；
document.getElementById（“提交”）.addEventListener（“单击”，（e）=>{
e、 预防默认值（）；
让nameInputEl=document.getElementById（“名称”）；
让idInputEl=document.getElementById（“idNumber”）；
让gdpaInputEl=document.getElementById（“gdpa”）；
//输入验证
inputValidation（nameInputEl.value、idInputEl.value、gdpaInputEl.value）；
//插入学生
如果（x==1）{
insertStudent（nameInputEl.value、idInputEl.value、gdpaInputEl.value）；
}
//显示成功消息
});
函数输入验证（名称、id、gdpa）{
//检查每个元素的值
如果（名称==“”）{
document.getElementById（“Error101”）.style.display=“block”；
}else if（id==“”）{
document.getElementById（“Error101”）.style.display=“block”；
}else if（gdpa==“”）{
document.getElementById（“Error101”）.style.display=“block”；
}否则{
document.getElementById（“Succes101”）.style.display=“block”；
x=1；
}
setTimeout（函数（）{
document.getElementById（“Error101”）.style.display=“无”；
document.getElementById（“成功101”）.style.display=“无”；
}, 3000);
}
函数insertStudent（名称、id、gdpa）{
让学生={
姓名:姓名,，
id:id，
gdpa:gdpa，
};
学生。推（学生）；
log（“学生数组：”，学生）；
x=0；
}
函数showList（）{
students.forEach（元素=>{
document.getElementById（“showLi”）.innerHTML=（学生）；
});
}

学校管理系统
分配
学名
学生证
学生GDPA
添加
显示
请填写所有空白字段
学生补充道

你是这个意思吗

document.getElementById("ShowLi").innerHTML = students
  .map(({ name, id, gdpa }) => `<tr><td>${name}</td><td>${id}</td><td>${gdpa}</td></tr>`)
  .join("");

学校管理系统
分配
学名
学生证
学生GDPA
添加
显示
名称
身份证件
GDPA
请填写所有空白字段
学生补充道

让学生=[]；
设x=0；
document.getElementById（“提交”）.addEventListener（“单击”，（e）=>{
e、 预防默认值（）；
让nameInputEl=document.getElementById（“名称”）；
让idInputEl=document.getElementById（“idNumber”）；
让gdpaInputEl=document.getElementById（“gdpa”）；
//输入验证
inputValidation（nameInputEl.value、idInputEl.value、gdpaInputEl.value）；
//插入学生
如果（x==1）{
insertStudent（nameInputEl.value、idInputEl.value、gdpaInputEl.value）；
}
//显示成功消息
});
函数输入验证（名称、id、gdpa）{
//检查每个元素的值
如果（名称==“”）{
document.getElementById（“Error101”）.style.display=“block”；
}else if（id==“”）{
document.getElementById（“Error101”）.style.display=“block”；
}else if（gdpa==“”）{
document.getElementById（“Error101”）.style.display=“block”；
}否则{
document.getElementById（“Succes101”）.style.display=“block”；
x=1；
}
setTimeout（函数（）{
document.getElementById（“Error101”）.style.display=“无”；
document.getElementById（“成功101”）.style.display=“无”；
}, 3000);
}
函数insertStudent（名称、id、gdpa）{
让学生={
姓名:姓名,，
id:id，
gdpa:gdpa，
};
学生。推（学生）；
log（“学生数组：”，学生）；
x=0；
}
函数showList（）{
const resultElement=document.getElementById（“showli”）；
while（resultElement.firstChild&&resultElement.removeChild（resultElement.firstChild））；
var table=document.getElementById（“showli”）.appendChild（document.createElement（“table”））；
学生。forEach（（元素，i）=>{
var row=表.插入行（i）；
var j=0；
for（对象键的常数v（元素））{
row.insertCell（j）.innerText=元素[v]；
j++；
}
});
}

学校管理系统
分配
学名
学生证
学生GDPA
添加
显示
请填写所有空白字段
学生补充道

每次我尝试按who按钮时，它都会给我一个错误，如果我想在单击时显示表列表，或者像事件侦听器一样，它会给我一个错误Uncaught TypeError:无法在HTMLButtonElementI上将属性“innerHTML”设置为null确实更改了它，但出现了相同的错误现在这起作用了，但我想将其显示为表格，再次感谢您的帮助！据我所知，它工作完美，我所需要的是给它一个良好的设计和完成感谢lot@mplungjan我尽了最大的努力我真的不知道是什么问题改变了一切正如你所说添加了你告诉我的同样的东西仍然会给我一个错误我知道你的代码更短更简单但它对我不起作用对不起我很抱歉，但他问如何显示数组中的整个列表，而您的解决方案是一个终生追加，不是