Question

将我的 Javascript 数组放入表中

2015-07-22

99

javascript html arrays html-table

在我的程序中，我获取了这些值。检查它们是否匹配并进行汇总。我一切正常，只是我获取最终数据并将其放入表格的所有尝试都失败了。

我希望表格有三行四列。每一行都将是完成的数组之一。从左侧的产品名称开始，每列向右移动

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script language="javascript" type="text/javascript">
var finished1 = ["Firex","Enrique",0,0];
var finished2 = ["Detector","Chris",0,0];
var finished3 = ["Hpvv","Diana",0,0];
var info = [];

info.push(["Firex", "Enrique", 6, 20000]);
info.push(["Detector", "Chris", 7, 35000]);
info.push(["Hpvv", "Diana", 12, 10000]);
info.push(["Firex", "Enrique", 4, 25000]);
info.push(["Detector", "Chris", 3, 15000]);
info.push(["Hpvv", "Diana", 3, 30000]);
info.push(["Firex", "Enrique", 8, 10000]);
info.push(["Detector", "Chris", 5, 20000]);
info.push(["Hpvv", "Diana", 6, 15000]);
info.push(["Firex", "Enrique", 5, 25000]);
info.push(["Detector", "Chris", 6, 35000]);
info.push(["Hpvv", "Diana", 7, 35000]);
info.push(["Firex", "Enrique", 3, 40000]);
info.push(["Detector", "Chris", 9, 10000]);
info.push(["Hpvv", "Diana", 5, 15000]);

info.forEach(function(element, index, array) {
  if(array[0][0] === array[index][0]) {
    finished1[2] += array[index][2];
    finished1[3] += array[index][3];
  }
  else if(info[1][0] === info[index][0]) {
    finished2[2] += array[index][2];
    finished2[3] += array[index][3];
  }
 else if(info[2][0] === info[index][0]) {
    finished3[2] += array[index][2];
    finished3[3] += array[index][3];
  }
});  

console.log(finished1);
console.log(finished2);
console.log(finished3);


</script>
</body>
</html>

Answer 1

最好使用 DOM api 以编程方式创建表格，正如@rlemon 所说。

//create the table DOM element
var table = document.createElement('table');

//create a row
var tr = document.createElement('tr');

//optional - adds headers to table
for(var x = 0; x < 4; x++){
   //create table header element
   var th = document.createElement('th');
   //set element text
   th.innerText = "header"+x;
   //append cell to row
   tr.appendChild(th);
}
//appends row to table
table.appendChild(tr);

//create another row
tr = document.createElement('tr');
for(var x = 0; x < 4; x++){
   //create cell
   var td = document.createElement('td');
   //set cell text
   td.innerText = finished1[x];
   tr.style.backgroundColor = "#AAA";//a little bit of color
   //append cell to row
   tr.appendChild(td);
}
table.appendChild(tr);

tr = document.createElement('tr');
for(var x = 0; x < 4; x++){
   var td = document.createElement('td');
   td.innerText = finished2[x];
   tr.appendChild(td);
}
table.appendChild(tr);

tr = document.createElement('tr');
for(var x = 0; x < 4; x++){
   var td = document.createElement('td'); 
   td.innerText = finished3[x];
   tr.style.backgroundColor = "#AAA";
   tr.appendChild(td);
}

table.appendChild(tr);

//append table to body
document.body.appendChild(table);

Answer 2

正如 @zipzit 所建议的，您可以使用 document.write 来完成在页面上显示数据。您可以在 JavaScript 中将 html 连同数据一起编写为字符串，如下所示：

var createTable = '<table><tr><td>' + finished1 + '</td></tr>' + '<tr><td>' + finished2 + '</td></tr>' + '<tr><td>' + finished3 + '</td></tr>' + '</table>'

然后利用 document.write 在页面上显示该字符串。

document.write(createTable);

查看这些关于在 html 中创建表格的文档，以便添加所需的表格标题和其他样式。