HTML form output as a table

Question

I have developed the HTML form, which pretty much looks as below:

Afterwards, I've prepared an external html file, where this form output is located. I've followed the tutorial below: https://www.youtube.com/watch?v=fNcJuPIZ2WE&ab_channel=WebDevSimplified

Next, because I get only pure data after colon, I decided to collect them in the table.

In this case I modified the javascript code:

    <table id="opresults"></table>

    <script>
        const resultsList = document.getElementById('opresults')
        const matches = document.querySelectorAll("fieldset");
        new URLSearchParams(window.location.search).forEach((value, name) => {
            resultsList.append(`<th>${name}</th><td>${value}</td>`)
            resultsList.append(document.createElement('br'))
        })
    </script>

by changing the resultsList.append, where instead of resultsList.append(${name}: ${value})

I've put resultsList.append(<th>${name}</th><td>${value}</td>)

with hope, that I will get the table instead.

Unfortunately, the and is only appended to the text and nothing changes really. Moreover it applies to other HTML attributes like and so on.

How can I make the table from the data presented below?

I saw in this example:

build a list with Javascript append

that it's fairly possible

UPDATE:

After another approach, my code looks like this:

<table id="opresults">Survey Form
    <tr>
       <th> Form question</th>
       <th>Answer</th>
    </tr>
    <tr >

    </tr>
</table>

 <script>
        const resultsList = document.getElementById('opresults')
        const matches = document.querySelectorAll("fieldset"); 
        <th>code</th></tr>'));
        new URLSearchParams(window.location.search).forEach((value, name) => 
            {
            resultsList.append(document.createElement('td'))
           
            resultsList.append(`${name}: ${value}`)
     
            resultsList.append(document.createElement('br'))
        })
    </script>

I want to have it in 2 columns. What is missing here?

Please read an introductory guide to HTML and learn about the `table` element the `tr` element and how a `br` element isn't allowed inside either. — Quentin, May 10 '21 at 10:00
And read what [`.append()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/append) does and how the type of its argument influences that behavior. — Andreas, May 10 '21 at 10:02

Geographos · Answer 1 · 2021-05-11T15:27:15.683

The proper HTML table structure is required at the very beginning.

      <table id="opresults" class="outputtable"><p class="outputtablehead">Survey Form - output</p>
    <tr class="colname">
       <th>Form question</th>
        <th colspan="2">Answer</th>
    </tr>

</table>

and next in our javascript code we should split the append attribute between the name and value separately, placing the table attributes between them

     <script>
        const resultsList = document.getElementById('opresults')
        const matches = document.querySelectorAll("fieldset");

        new URLSearchParams(window.location.search).forEach((value, name) => {
            resultsList.append(document.createElement('tbody'))
            resultsList.append(`${name}`)
            resultsList.append(document.createElement('td'))
            resultsList.append(`${value}`)
            resultsList.append(document.createElement('br'))   
        })
    </script>

A quite good solution was here:

document.createElement on table,tr,td tags fails IE8

HTML form output as a table

1 Answers1

Linked