Using Javascript create table (tableee added)

Question

I'm putting tableee's(a list contains 36 elements) elements into my table(which is x) ,but It's would be a 6*6 matrix not just 1*1 matrix.

wrong

I need(just a likely example)

contains of my tableee

            var x = document.createElement('table');
            var y = document.createElement("tr");
            var z = document.createElement("td");
            document.body.appendChild(x);
            for (var i=0; i<tableee.length; i++){
                x.appendChild(y);
                y.appendChild(z);
                var t = document.createTextNode("why");
                z.appendChild(t);
            }
            //console.log(tableee);
            document.getElementById("table1").innerHTML = x;

The table structure you show first is invalid because it omits the mandatory tbody. The browser corrects that mistake. Aside from that, it is unclear what you want. — connexo
– connexo, Commented Mar 22, 2020 at 8:24

vicpermir · Accepted Answer · 2020-03-22 08:38:18Z

I don't know what tableee is, but since you only use the length I've changed it to two variables rows and columns.

This should create the table structure you are looking for:

var columns = 6;
var rows    = 6;

var table = document.createElement('table');
var tbody = document.createElement('tbody');

for (var i = 0; i < rows; i++){
  var row = document.createElement('tr');

  for (var j = 0; j < columns; j++){
    var column = document.createElement('td');
    var text = document.createTextNode('text');
    column.appendChild(text);
    row.appendChild(column);
  }

  tbody.appendChild(row);
}

table.appendChild(tbody);

document.body.appendChild(table);

table td {
  border: 1px solid black;
  padding: 2px 4px; 
}

Also, it's a better idea to append the table to the document body at the end to avoid reflow/repaint calls on every iteration.

RedJanvier · Accepted Answer · 2020-03-22 12:34:21Z

Thank you for providing the content of the variable tableee. So in my opinion I think you can use template strings (ES6 feature) to print all the content of the array but you will tweak the array to subdivide it into sub arrays

I made it programmatically but if you have direct access to the array, feel free to edit first to have the same form as in the code comments:

function splitarray(input) {
                var output = [];

                for (var i = 0; i < input.length; i += 6) {
                    output[output.length] = input.slice(i, i + 6);
                }

                return output;
            }
            
            // this is a dummie array I made up according to your tablee data in the screenshots
            var tableee = ['1year', '2year', '3year', '4year', '5year', 'rate1%', '1.0100', '1.0201', '1.0303', '1.0406', '1.0510', 'rate2%', '1.0100', '1.0201', '1.0303', '1.0406', '1.0510', 'rate3%', '1.0100', '1.0201', '1.0303', '1.0406', '1.0510', 'rate4%', '1.0100', '1.0201', '1.0303', '1.0406', '1.0510', 'rate5%', '1.0100', '1.0201', '1.0303', '1.0406', '1.0510'];
            
            // This is to add an empty string at the beginning of the array
            tableee.unshift('');

            // This is to slice the array into sub-array that have lenght of 6 each (to fit the required table)
            // The array will have the form of [ [...](6), [...](6), [...](6), [...](6), [...](6), [...](6) ](6)
            var newTableee = splitarray(tableee);

            var x = '<table border="1"> <tbody>';

            for (var i = 0; i < newTableee.length; i++) {
                x += '<tr>';
                for (var j = 0; j < 6; j++) {
                    x += `<td> ${newTableee[i][j]} </td>`; // Here is the use of template strings
                }
                x += '</tr>';
            }

            x += '</tbody> </table>';

            document.getElementById('table1').innerHTML = x;

<div id="table1"></div>

hopefully this is a more specific answer to your issue.

Collectives™ on Stack Overflow

Using Javascript create table (tableee added)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related