Javascript 用循环和循环绘制表格
为了更好地理解DOM操作,我正在做一个练习(从Javascript开始)。尝试仅使用JS以干式方法重新创建下表(教科书解决方案为):Javascript 用循环和循环绘制表格,javascript,html,dom,Javascript,Html,Dom,为了更好地理解DOM操作,我正在做一个练习(从Javascript开始)。尝试仅使用JS以干式方法重新创建下表(教科书解决方案为): 汽车 最高速度 价格 雪佛兰 时速120英里 $10,000 庞蒂亚克 时速140英里 $20,000 我尝试了这个方法,但不确定如何在不抛出错误的情况下循环创建变量: var array = [['Car', 'Top Speed', 'Price'],['Chevrolet', '120mph', '$10,000'], ['Pontiac', '140p
汽车
最高速度
价格
雪佛兰
时速120英里
$10,000
庞蒂亚克
时速140英里
$20,000
我尝试了这个方法,但不确定如何在不抛出错误的情况下循环创建变量:
var array = [['Car', 'Top Speed', 'Price'],['Chevrolet', '120mph', '$10,000'], ['Pontiac', '140pmh', '$20,000']] // Creating a data array which a loop will source from
var table = document.createElement('table');
document.body.appendChild(table); // Drew the main table node on the document
for (var i = 0; i<3; i++) {
var tr[i] = document.createElement('tr'); //Create 3 <tr> elements assigned to a unique variable BUT need a working alternative for 'tr[i]'
table.appendChild(tr[i]); // Append to <table> node
for (var j = 0; j<3; j++) {
var tdText = document.createTextNode(array[i][j]); // Extract data from array to a placeholder variable
tr[i].appendChild(tdText); // Take string from placeholder variable and append it to <tr> node
}
}
var array=[['Car'、'Top Speed'、'Price']、['Chevrolet'、'120mph'、'$10000']、['Pontiac'、'140pmh'、'$20000']]//创建一个循环将从中产生的数据数组
var table=document.createElement('table');
document.body.appendChild(表);//在文档上绘制主表节点
对于(var i=0;i请使用tr
而不是tr[i]
。它会起作用
var array = [['Car', 'Top Speed', 'Price'],['Chevrolet', '120mph', '$10,000'], ['Pontiac', '140pmh', '$20,000']] // Creating a data array which a loop will source from
var table = document.createElement('table');
document.body.appendChild(table); // Drew the main table node on the document
for (var i = 0; i<3; i++) {
var tr = document.createElement('tr'); //Create 3 <tr> elements assigned to a unique variable BUT need a working alternative for 'tr[i]'
table.appendChild(tr); // Append to <table> node
for (var j = 0; j<3; j++) {
var tdElement = document.createElement('td');
tdElement.innerHTML = array[i][j];
tr.appendChild(tdElement); // Take string from placeholder variable and append it to <tr> node
}
}
var array=[['Car'、'Top Speed'、'Price']、['Chevrolet'、'120mph'、'$10000']、['Pontiac'、'140pmh'、'$20000']]//创建一个循环将从中产生的数据数组
var table=document.createElement('table');
document.body.appendChild(table);//在文档上绘制主表节点
对于(var i=0;i,如前所述,问题在于声明tr[i]
变量时出现语法错误
更干净的方法是使用表api方法,如
var数组=[
[‘汽车’、‘最高速度’、‘价格’],
[‘雪佛兰’、‘时速120英里’、‘10000美元’],
[‘庞蒂亚克’、‘140pmh’、‘20000美元’]
]//创建循环将从中产生的数据数组
var table=document.createElement('table');
document.body.appendChild(table);//在文档上绘制主表节点
array.forEach(函数(行){
var tr=table.insertRow();//创建新行
row.forEach(函数(列){
var td=tr.insertCell();
td.innerText=column;//从占位符变量中获取字符串并将其附加到节点
});
})
使用调试器逐步检查代码时看到了什么?查看控制台时看到了什么?请参阅。
var array = [['Car', 'Top Speed', 'Price'],['Chevrolet', '120mph', '$10,000'], ['Pontiac', '140pmh', '$20,000']] // Creating a data array which a loop will source from
var table = document.createElement('table');
document.body.appendChild(table); // Drew the main table node on the document
for (var i = 0; i<3; i++) {
var tr = document.createElement('tr'); //Create 3 <tr> elements assigned to a unique variable BUT need a working alternative for 'tr[i]'
table.appendChild(tr); // Append to <table> node
for (var j = 0; j<3; j++) {
var tdElement = document.createElement('td');
tdElement.innerHTML = array[i][j];
tr.appendChild(tdElement); // Take string from placeholder variable and append it to <tr> node
}
}