How to print array data inside a table

Question

So I have this code where I'm trying to print(physical print as in paper) a table when a button is clicked, which is populated with array data. I managed to print the array data but I can not seem to find on how to put this in a table. also is there a better way than document.write()I am not a huge fan of it ?

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

expected outcome would be:

work order and date are not yet populated this is just a test file to use in a bigger project.

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

thanks in advance.

Is your current code failing in some way? From the text of the question it sounds like your current solution works and you're just looking for alternate solutions. — David
– David, Commented Jun 29, 2020 at 12:45
@david the code is partially working I can print the array data but I can not seem to fit it inside a table like the expected outcome. as for the alternate solution I was just asking it because I read document.write() is kinda outdated. — Quint
– Quint, Commented Jun 29, 2020 at 12:48
Could you please create a small demo for this using jsfiddle or snippet here. — palaѕн
– palaѕн, Commented Jun 29, 2020 at 12:54

Md Rana Hossain · Accepted Answer · 2020-06-29 15:48:59Z

1

here is the solution you just need to replace ${} in code link.

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

edited Jun 29, 2020 at 15:48

answered Jun 29, 2020 at 13:39

Md Rana Hossain

3142 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Quint Over a year ago

<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>

is this a correct way to call my array data ? in this example

SirPilan · Accepted Answer · 2020-06-29 13:30:04Z

I assume we got an array of objects here.

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;

<div />

Collectives™ on Stack Overflow

How to print array data inside a table

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related