Question

通过我的程序，我正在使用这些值。检查它们是否匹配并总结它们。除了我尝试获取最终数据并将其放入表中失败之外，我已经完成了所有工作。

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

<!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来完成在页面上显示数据。您可以将html和数据一起写成JavaScript中的字符串，如下所示：

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中创建表格的these个文档，以便添加所需的表格标题和其他样式。

将我的Javascript数组放入表中

2 个答案: