how to display array values inside tag?

Asked Aug 29 '12 at 13:11

Active Apr 12 '17 at 08:50

Viewed 3.4k times

3

I have array values like this. I want to display these values in HTML table tag

`<script type="text/javascript"> var orderArray = [ ["1","29-Aug-2012", "Product1", "client1"], ["2","29-Aug-2012", "Product2", "client2"], ["3","29-Aug-2012", "Product3", "client3"], ["4","29-Aug-2012", "Product4", "client4"], ["5","29-Aug-2012", "Product5", "client5"] ]; function display() { for(i=0;i<ordertArray.length;i++) { //How to display values of array inside the div or table tag ??? } } </script>`

How to display values of array inside the div or table tag ???

javascript html

asked Aug 29 '12 at 13:11
Maayi

157

2

2

11

2

Do you already have a table or do you need to create table on the fly? – Shadow The GPT Wizard Aug 29 '12 at 13:13

I want to know how the value are fetched. Be it manual or on-the-fly. – Maayi Aug 29 '12 at 13:16

4 Answers4

6

`orderArray`'s items represent `<tr>` elements, and each item inside represents a `<td>` element. So you can loop through `orderArray` creating `<tr>`s, and then loop through its elements on each loop creating `<td>`s: http://jsfiddle.net/h7F7e/.

`var table = document.getElementById("table"); // set this to your table var tbody = document.createElement("tbody"); table.appendChild(tbody); orderArray.forEach(function(items) { var row = document.createElement("tr"); items.forEach(function(item) { var cell = document.createElement("td"); cell.textContent = item; row.appendChild(cell); }); tbody.appendChild(row); });`

edited Aug 29 '12 at 13:24

pimvdb

answered Aug 29 '12 at 13:15
pimvdb

151,816

78

307

352

How to display this table inside a div on particular location ? – Maayi Aug 29 '12 at 13:19

@Ismail Vitla: I actually assumed you already have a table. Just define the table in HTML somewhere and set `var table = ...` so that it refers to the table. – pimvdb Aug 29 '12 at 13:20

1

[Doesn't work for IE 8 or lower](http://stackoverflow.com/questions/812693/cant-dynamically-add-rows-to-a-table-in-ie) – Shadow The GPT Wizard Aug 29 '12 at 13:21

2

Something like this would create a dynamic table for you :

// get handle on div var container = document.getElementById('container'); // create table element var table = document.createElement('table'); var tbody = document.createElement('tbody'); // loop array for (i = 0; i < orderArray.length; i++) { // get inner array var vals = orderArray[i]; // create tr element var row = document.createElement('tr'); // loop inner array for (var b = 0; b < vals.length; b++) { // create td element var cell = document.createElement('td'); // set text cell.textContent = vals[b]; // append td to tr row.appendChild(cell); } //append tr to tbody tbody.appendChild(row); } // append tbody to table table.appendChild(tbody); // append table to container container.appendChild(table);

Uses `document.createElement()` and `element.appendChild()`

Working example here

edited Aug 29 '12 at 13:24

Manse

answered Aug 29 '12 at 13:18
Manse

37,765

10

83

108

Don't use innerHTML for text values – Bergi Aug 29 '12 at 13:23

How to add an additional row having table headings ? – Maayi Aug 29 '12 at 14:27

@ManseUK how to append an header row to this table ? – Maayi Aug 29 '12 at 14:59

2

Use the DOM functions of table elements:

`function display() { var table = document.createElement("table"); for (var i=0; i<orderArray.length; i++) { var row = table.insertRow(); for (var j=0; j<orderArray[i].length; j++) { var cell = row.insertCell(); cell.appendChild(document.createTextNode(orderArray[i][j])); } } return table; }`

Call that function when the DOM is ready, and append the returned table somewhere.

edited Aug 29 '12 at 13:39
Manse

37,765

10

83

108

answered Aug 29 '12 at 13:20
Bergi

630,263

148

957

1,375

Works perfectly but one of my `
– FlorentApr 15 '17 at 15:15

1

@Florent If you have html content (and properly xss-escaped!) instead of text, don't create a text node but use `cell.innerHTML = orderArray[i][j];` – Bergi Apr 16 '17 at 07:18

1

`var table = "<table>"; // Open Table for(i=0; i<orderArray.length; i++) { table += "<tr>"; // Open Row for(i2=0; i2<orderArray[i].length; i2++) { { table += "<td>" + orderArray[i][i2] + "</td>"; // Each Column } table += "</tr>"; // Close Row } table += "</table>"; // Close Table`

edited Aug 29 '12 at 13:23

David Houde

answered Aug 29 '12 at 13:17
David Houde

4,835

1

20

29

1

You're adding four cells on each inner loop - thus 16 per row in total. – pimvdb Aug 29 '12 at 13:22

The foreach syntax is not supported in most browsers – Bergi Aug 29 '12 at 13:24

Linked

0
Map a javascript array to html table

0
How to convert arrays which contain HTML elements to a table in Javascript?

1
Javascript array to html table

Related

0
Map a javascript array to html table

` contains `` tags which are displayed as raw text. Is there a possibility to have them in HTML ?

Question

I have array values like this. I want to display these values in HTML table tag

<script type="text/javascript">
var orderArray = [
    ["1","29-Aug-2012", "Product1", "client1"],
    ["2","29-Aug-2012", "Product2", "client2"],
    ["3","29-Aug-2012", "Product3", "client3"],
    ["4","29-Aug-2012", "Product4", "client4"],
    ["5","29-Aug-2012", "Product5", "client5"]
    ];

function display()
{
    for(i=0;i<ordertArray.length;i++)
    {
    //How to display values of array inside the div or table tag ???
    }
}

</script>

How to display values of array inside the div or table tag ???

Do you already have a table or do you need to create table on the fly? — Shadow The GPT Wizard, Aug 29 '12 at 13:13
I want to know how the value are fetched. Be it manual or on-the-fly. — Maayi, Aug 29 '12 at 13:16

pimvdb · Answer 1 · 2012-08-29T13:24:33.567

6

orderArray's items represent <tr> elements, and each item inside represents a <td> element. So you can loop through orderArray creating <tr>s, and then loop through its elements on each loop creating <td>s: http://jsfiddle.net/h7F7e/.

var table = document.getElementById("table");  // set this to your table

var tbody = document.createElement("tbody");
table.appendChild(tbody);
orderArray.forEach(function(items) {
  var row = document.createElement("tr");
  items.forEach(function(item) {
    var cell = document.createElement("td");
    cell.textContent = item;
    row.appendChild(cell);
  });
  tbody.appendChild(row);
});

edited Aug 29 '12 at 13:24

answered Aug 29 '12 at 13:15

pimvdb

151,816
78
307
352

How to display this table inside a div on particular location ? – Maayi Aug 29 '12 at 13:19
@Ismail Vitla: I actually assumed you already have a table. Just define the table in HTML somewhere and set `var table = ...` so that it refers to the table. – pimvdb Aug 29 '12 at 13:20
1

[Doesn't work for IE 8 or lower](http://stackoverflow.com/questions/812693/cant-dynamically-add-rows-to-a-table-in-ie) – Shadow The GPT Wizard Aug 29 '12 at 13:21

Manse · Answer 2 · 2012-08-29T13:24:12.057

Something like this would create a dynamic table for you :

// get handle on div
var container = document.getElementById('container');
// create table element
var table = document.createElement('table');
var tbody = document.createElement('tbody');
// loop array
for (i = 0; i < orderArray.length; i++) {
    // get inner array
    var vals = orderArray[i];
    // create tr element
    var row = document.createElement('tr');
    // loop inner array
    for (var b = 0; b < vals.length; b++) {
        // create td element
        var cell = document.createElement('td');
        // set text
        cell.textContent = vals[b];
        // append td to tr
        row.appendChild(cell);
    }
    //append tr to tbody
    tbody.appendChild(row);
}
// append tbody to table
table.appendChild(tbody);
// append table to container
container.appendChild(table);

Uses document.createElement() and element.appendChild()

Working example here

Don't use innerHTML for text values – Bergi Aug 29 '12 at 13:23 — Bergi, Aug 29 '12 at 13:23
How to add an additional row having table headings ? – Maayi Aug 29 '12 at 14:27 — Maayi, Aug 29 '12 at 14:27
@ManseUK how to append an header row to this table ? – Maayi Aug 29 '12 at 14:59 — Maayi, Aug 29 '12 at 14:59

score 2 · Answer 3 · edited Aug 29 '12 at 13:39

2

Use the DOM functions of table elements:

function display() {
    var table = document.createElement("table");
    for (var i=0; i<orderArray.length; i++) {
        var row = table.insertRow();
        for (var j=0; j<orderArray[i].length; j++) {
            var cell = row.insertCell();
            cell.appendChild(document.createTextNode(orderArray[i][j]));
        }
    }
    return table;
}

Call that function when the DOM is ready, and append the returned table somewhere.

edited Aug 29 '12 at 13:39

Manse

37,765
10
83
108

answered Aug 29 '12 at 13:20

Bergi

630,263
148
957
1,375

Works perfectly but one of my `

David Houde · Answer 4 · 2012-08-29T13:23:52.697

1

var table = "<table>"; // Open Table

for(i=0; i<orderArray.length; i++)
{
 table += "<tr>"; // Open Row

 for(i2=0; i2<orderArray[i].length; i2++) {
 {
  table += "<td>" + orderArray[i][i2] + "</td>"; // Each Column
 }

 table += "</tr>"; // Close Row
}

table += "</table>"; // Close Table

edited Aug 29 '12 at 13:23

answered Aug 29 '12 at 13:17

David Houde

4,835
1
20
29

1

You're adding four cells on each inner loop - thus 16 per row in total. – pimvdb Aug 29 '12 at 13:22
The foreach syntax is not supported in most browsers – Bergi Aug 29 '12 at 13:24