HTML 表单输出为表格答案

【问题标题】：HTML form output as a tableHTML 表单输出为表格
【发布时间】：2021-07-31 17:43:00
【问题描述】：

我开发了 HTML 表单，如下所示：

之后，我准备了一个外部 html 文件，此表单输出所在的位置。我已按照以下教程进行操作： https://www.youtube.com/watch?v=fNcJuPIZ2WE&ab_channel=WebDevSimplified

接下来，因为我得到的只是冒号后面的纯数据，所以我决定将它们收集到表格中。

在这种情况下，我修改了 javascript 代码：

    <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>

通过更改resultsList.append，而不是 resultsList.append(${name}: ${value})

我放了 resultsList.append(<th>${name}</th><td>${value}</td>)

希望我能得到这张桌子。

不幸的是，and 只是附加到文本中，并没有真正改变。此外，它适用于其他 HTML 属性，例如等等。

如何根据以下数据制作表格？

我在这个例子中看到了：

build a list with Javascript append

很有可能

更新：

经过另一种方法，我的代码如下所示：

<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>

我想把它分成两列。这里缺少什么？

【问题讨论】：

请阅读 HTML 入门指南并了解 table 元素和 tr 元素以及如何在其中也不允许使用 br 元素。
并阅读 .append() 的作用以及其参数的类型如何影响该行为。
请贴出相关代码，不要截图。
jsfiddle.net/ratcbe9h 这是代码

标签： javascript html forms

【解决方案1】：

一开始就需要正确的 HTML 表格结构。

      <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>

接下来在我们的 javascript 代码中，我们应该将 append 属性分别拆分在 name 和 value 之间，将表格属性放在它们之间

     <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>

这里有一个很好的解决方案：

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

【讨论】：