Javascript 如何打印表中的数组数据_Javascript

Javascript 如何打印表中的数组数据

javascript

Javascript 如何打印表中的数组数据,javascript,Javascript,所以我有一段代码，当点击一个按钮时，我试图打印一个表（在纸上打印），其中填充了数组数据。我设法打印了数组数据，但似乎找不到如何将其放入表中。还有比document.write（）更好的方法吗？ var Obj = []; function printDiv(){ var divContents = document.getElementsByClassName("test") console.log(divContents)

所以我有一段代码，当点击一个按钮时，我试图打印一个表（在纸上打印），其中填充了数组数据。我设法打印了数组数据，但似乎找不到如何将其放入表中。还有比

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 = [];
    }

var Obj=[]；
函数printDiv（）{
var divContents=document.getElementsByClassName（“测试”）
console.log（divContents）
//if（$（“div”）.hasClass（“test”）==true）{//可以使用jquery hasfind检查acive类是否存在，如果是，则获取子div的内容
//如果此选项更好，请展开
//console.log（'istrue'）；
//} 
对于（var i=0；i'）
}
变量a=窗口打开（''，''高度=500，宽度=500'）；
a、 文件。写（“”）；
a、 document.write（'Div内容为
'）；
a、 文件。写入（“”）
a、 文件写入（“”+Obj.join（“”）+“”）；
a、 文件。写（“”）；
a、 document.close（）；
a、 打印（）；
Obj=[]；
}

预期结果将是：

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

jsfiddle：

提前谢谢。

我想我们这里有一组对象

constdataobject={'name'：null，'age'：null，'favoriteFood'：null}；
让数据=[]；
让行={…数据对象}；
row.name='John'；
row.age='10'；
row.favoriteFood=‘煎饼’；
数据推送（row）；
行={…数据对象}；
row.name='Jenny'；
row.age='11'；
row.favoriteFood='Pie'；
数据推送（row）；
行={…数据对象}；
row.name='James'；
row.age='12'；
row.favoriteFood='Fries'；
数据推送（row）；
//生成表标题
让tableHeaderColumns=Object.keys（数据[0]）.map（colKey=>`${colKey}`）。join（“”）；
const tableHeader=`${tableHeaderColumns}`；
//生成表行
设i=0；
让tableRows=''；
设灰色样式='背景色：#EEE；'；
data.forEach（函数（rowObject）{
const row=Object.values（rowObject.map）（colValue=>`${colValue}`）。join（“”）；
让rowStyle=''；
如果（++i%2）{
行样式=灰色样式；
}
tableRows+=`${row}`；
});
//生成表（添加所需的样式）
const table=`${tableHeader}${tableRows}`；
//用于在div中进行演示显示
document.querySelector（'div'）.innerHTML=table
我想我们这里有一个对象数组

constdataobject={'name'：null，'age'：null，'favoriteFood'：null}；
让数据=[]；
让行={…数据对象}；
row.name='John'；
row.age='10'；
row.favoriteFood=‘煎饼’；
数据推送（row）；
行={…数据对象}；
row.name='Jenny'；
row.age='11'；
row.favoriteFood='Pie'；
数据推送（row）；
行={…数据对象}；
row.name='James'；
row.age='12'；
row.favoriteFood='Fries'；
数据推送（row）；
//生成表标题
让tableHeaderColumns=Object.keys（数据[0]）.map（colKey=>`${colKey}`）。join（“”）；
const tableHeader=`${tableHeaderColumns}`；
//生成表行
设i=0；
让tableRows=''；
设灰色样式='背景色：#EEE；'；
data.forEach（函数（rowObject）{
const row=Object.values（rowObject.map）（colValue=>`${colValue}`）。join（“”）；
让rowStyle=''；
如果（++i%2）{
行样式=灰色样式；
}
tableRows+=`${row}`；
});
//生成表（添加所需的样式）
const table=`${tableHeader}${tableRows}`；
//用于在div中进行演示显示
document.querySelector（'div'）.innerHTML=table
以下是您只需在代码链接中替换${}的解决方案
code: https://jsfiddle.net/vnxd1pew/3/

以下是您只需在代码链接中替换${}的解决方案
code: https://jsfiddle.net/vnxd1pew/3/

您当前的代码是否以某种方式失败？从问题的文本来看，您当前的解决方案似乎有效，而您只是在寻找替代解决方案。@david代码部分有效。我可以打印数组数据，但我似乎无法像预期的结果那样将其放入表中。至于替代解决方案，我只是问它，因为我读了文档。write（）
有点过时。请创建一个仅用于打印的样式表。请使用或在此处为此创建一个样式表。JSFIDLE显示我得到的是您当前的代码在某种程度上失败了吗？从问题的文本来看，您当前的解决方案似乎有效，而您只是在寻找替代解决方案。@david代码部分有效。我可以打印数组数据，但我似乎无法像预期的结果那样将其放入表中。至于替代解决方案，我只是问它，因为我读了文档。write（）
有点过时。请创建一个仅用于打印的样式表。请使用或在此处为此创建一个样式表。jsfiddle显示我得到的${Obj[0]}${Obj[1]}${Obj[2]}
这是调用数组数据的正确方法吗？在本例中，${Obj[0]}${Obj[1]}${Obj[2]}
这是调用数组数据的正确方法吗？在这个例子中