Creating a dynamic table in JavaScript

Question

I am trying to create a dynamic table using JavaScript. I need the table to take the form of a scheduler (hour blocks for 24 hours) It has to span a full 24 columns for the hours with a header for each block. 12am, 1am...11pm, etc. However, I'm currently restricted to the first col for the headers. My knowledge of JavaScript is at a beginner level. This is a basic representation of what I need and what is broken. What would be the best way to fix this code or implement something better?

function populateTable(table, time, rows, cells, content) {
            if (!table) table = document.createElement('table');
                var head = document.createElement('thead');
                var title = document.createElement('th');

                head.appendChild(title);
                    for (var x = 1; x <= time; x++){
                    table.appendChild(head);
                    title.appendChild(document.createTextNode(x));
                    }
                var body = document.createElement('tbody');
                    for (var i = 0; i < rows; ++i) {
                        var row = document.createElement('tr');
                            for (var j = 0; j < cells; ++j) {
                            row.appendChild(document.createElement('td'));
                            row.cells[j].appendChild(document.createTextNode(content + (j + 1)));
                            }
                        table.appendChild(row);
                    }
                return table;
                }
                $(document).ready(function () {
                    document.getElementById('scheduleTable')
                    .appendChild(populateTable(null,12,12, 12, "content"));
        });

Wio · Accepted Answer · 2014-07-09 20:35:32Z

1

Need to change the top part to:

var head = document.createElement('thead');
table.appendChild(head);

for (var x = 1; x <= time; x++) {
    var title = document.createElement('th');
    title.appendChild(document.createTextNode(x));
    head.appendChild(title);
}

If you want the title cells to be spread out correctly.

answered Jul 9, 2014 at 20:35

Wio

1,25111 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Creating a dynamic table in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related