How Do I Generate a DIV table from a form submission?

How Do I Generate a DIV table from a form submission?

I'm trying to generate a DIV table header row using the JavaScript (no jQuery) shown below but rather than the expected output shown here, what I generate is a row of the items in the array (the headings separated by commas).

I'm trying to generate a DIV table header row using the JavaScript (no jQuery) shown below but rather than the expected output shown here, what I generate is a row of the items in the array (the headings separated by commas).

var main = document.getElementById("left");

var likertTable = document.createElement("DIV"); //main table div likertTable.setAttribute("class", "divTable");

var tableHeading = document.createElement("DIV"); // table heading tableHeading.setAttribute("class", "divTableHeading");

var row = document.createElement("DIV"); row.setAttribute("class", "divTableRow"); tableHeading.appendChild(row); likertTable.appendChild(tableHeading); main.appendChild(likertTable);

var tableHeader = ["Question", "Strongly Agree", "Agree", "Undecided", "Disagree", "Strongly Disagree"]; for (var i = 0; i < tableHeader.length; i++) { var tableCell = document.createElement("DIV"); tableCell.setAttribute("class","divTableCell"); row.appendChild(tableCell); tableCell.innerHTML = tableHeader[i]; } .divTable{ display: table; width: 100%; } .divTableRow { display: table-row; } /.divTableHeading { background-color: #EEE; display: table-header-group; }/ .divTableCell, .divTableHead { border: 1px solid #999999; display: table-cell; padding: 3px 10px; } .divTableHeading { background-color: #EEE; display: table-header-group; font-weight: bold; } .divTableFoot { background-color: #EEE; display: table-footer-group; font-weight: bold; } .divTableBody { display: table-row-group; } <div id="left"></div>


The actual variable is var tableHeader = [ranges]; and it works just fine as seen in the screen capture and the snippet correctly appends if a regular HTML table is generated with a TH rather than DIV tag.

Where am I going wrong? Oh shoot!!! Asked an answered! var tableHeader = [ranges]; should have been var tableHeader = ranges;

Came home as the script ran perfectly in snippets editor.

javascript html css

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to Create JavaScript carousel with HTML, CSS and JavaScript

Learn how to create JavaScript carousel with HTML, CSS and JavaScript. Learn how to create a JavaScript slider step by step. Now many people will just download a library to create a JavaScript carousel or JavaScript slider.

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown. W will build a Responsive Website with HTML, CSS, and JavaScript

CSS Button Generator (Mini) using HTML, CSS, and JavaScript

Learn how to create a mini CSS Button generator just by using HTML, CSS, and JavaScript. We will only cover some properties related to the button but you can use other properties to allow users to play around with different styles and designs.

Animated Counter using JavaScript with HTML, CSS | JavaScript Counter Animation

In this video, you'll see Animated Counter using JavaScript with HTML CSS

CSS3 Clip-path Transform Effects on Scroll with Video Background | Html CSS Vanilla Javascript

CSS3 Clip-path Transform Effects on Scroll with Video Background | Html CSS Vanilla Javascript