如何在表格内打印数组数据答案

【问题标题】：How to print array data inside a table如何在表格内打印数组数据
【发布时间】：2020-10-19 15:15:08
【问题描述】：

所以我有这段代码，当我点击一个按钮时，我试图打印（物理打印在纸上）一个表格，其中填充了数组数据。我设法打印了数组数据，但似乎找不到如何将其放入表格中。还有比document.write()我不是它的忠实粉丝更好的方法吗？

var Obj = [];

    function printDiv(){
        var divContents = document.getElementsByClassName("test")
        console.log(divContents) 
        //if($("div").hasClass("test") == true){// can use jquery hasfind in order to check if acive class exists if yes get content of child divs
            //expand if this option is better
        //console.log('istrue'); 
        //} 
        for(var i = 0; i< divContents.length; i++){
            Obj.push(divContents[i].textContent +'</br>')
        }
       
        var a = window.open('','','height=500,width=500');
        a.document.write('<html>');
        a.document.write('<body><h1>Div contents are<h1><br>');
        a.document.write('<table><tbody><tr>')
        a.document.write('<td>'+ Obj.join(' ')+'<td>');
        a.document.write('</tr></tbody></table></body></html>');
        a.document.close();
        a.print();
        Obj = [];
    }

预期结果是：

工作订单和日期尚未填充，这只是一个用于更大项目的测试文件。

jsfiddle：https://jsfiddle.net/yLz7stxr/

提前致谢。

【问题讨论】：

您当前的代码是否以某种方式失败？从问题的文字来看，您当前的解决方案似乎有效，而您只是在寻找替代解决方案。
@david 代码部分工作我可以打印数组数据，但我似乎无法像预期的结果那样将其放入表格中。至于替代解决方案，我只是问它，因为我读到 document.write() 有点过时了。
创建一个仅用于打印的样式表。
您能否在此处使用jsfiddle 或snippet 为此创建一个small demo。
jsfiddle.net/yLz7stxr jsfiddle 显示我得到了什么

标签： javascript

【解决方案1】：

这是您只需在代码链接中替换 ${} 的解决方案。

code: https://jsfiddle.net/vnxd1pew/3/

【讨论】：

<td style="border: 1px solid #ddd; padding: 8px;">${Obj[0]}</td> <td style="border: 1px solid #ddd; padding: 8px;">${Obj[1]}</td> <td style="border: 1px solid #ddd; padding: 8px;">${Obj[2]}</td> 这是调用我的数组数据的正确方法吗？在这个例子中

【解决方案2】：

我假设我们在这里有一个对象数组。

const dataObject = {'name': null, 'age': null, 'favoriteFood': null};

let data = [];

let row = {...dataObject};
row.name = 'John';
row.age = '10';
row.favoriteFood = 'Pancakes';
data.push(row);

row = {...dataObject};
row.name = 'Jenny';
row.age = '11';
row.favoriteFood = 'Pie';
data.push(row);

row = {...dataObject};
row.name = 'James';
row.age = '12';
row.favoriteFood = 'Fries';
data.push(row);

// build table header
let tableHeaderColumns = Object.keys(data[0]).map(colKey => `<th>${colKey}</th>`).join('');
const tableHeader = `<tr align=left>${tableHeaderColumns}</tr>`;

// build table rows
let i = 0;
let tableRows = '';
let greyStyle = 'background-color: #EEE;';
data.forEach(function(rowObject) {
  const row = Object.values(rowObject).map(colValue => `<td>${colValue}</td>`).join('');
  let rowStyle = '';
  if(++i%2) {
    rowStyle = greyStyle;
  }
  
  tableRows += `<tr style='${rowStyle}'>${row}</tr>`;
});

// build table (add desired styling)
const table = `<table cellspacing=0 width=500 border=1 borderColor=#EEE style='border-collapse: collapse;'>${tableHeader}${tableRows}</table>`;

// for demonstration display in div
document.querySelector('div').innerHTML = table;

&lt;div /&gt;

【讨论】：