时间戳

首页 > 解决方案 > Element.append() 生成不必要的列

javascript - Element.append() 生成不必要的列

问题描述

我想为我的表格设置样式，该表格说明了我的 HTML 表单的输出。

该表仅包含 2 列。我使用了Element.append()推送我的 HTML 表单数据的方法。

我的代码如下所示：

 <table id="opresults" class="outputtable"><p class="outputtablehead">Survey Form - output</p>
    <tr class="colname">
       <th class="question">Form question</th>
       <th class="answer">Answer</th>
    </tr>
    <tr class="opcontent">
        <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(document.createElement('td'),`${name}:`)
                resultsList.append(document.createElement('td'))
                resultsList.append(`${value}`)
                resultsList.append(document.createElement('br'))   
               
            })
        </script> 
    </tr>
</table>

我不知道为什么我的脚本会创建一个额外的空列！

我想使用上面的脚本将我的数据放在运算符中。是否可以使用Element.append()方法，或者我应该使用Element.insertAdjacentHTML()

在此处输入图像描述

标签： javascripthtmlcss

解决方案

你搞砸了标记嵌套。正确的做法是这样的（如果你对结构不太了解，避免写一个衬里总是好的）

<table id="opresults" class="outputtable">
  <p class="outputtablehead">Survey Form - output</p>
  <tr class="colname">
    <th class="question">Form question</th>
    <th class="answer">Answer</th>
  </tr>
  <tr class="opcontent">
    <script>
      const resultsList = document.getElementById('opresults')
      const matches = document.querySelectorAll("fieldset");
      const innerBody = document.createElement('tbody');
      resultsList.append(innerBody);

      new URLSearchParams(window.location.search).forEach((value, name) => {
        const row = document.createElement('tr');
        const tdName = document.createElement('td');
        const tdValue = document.createElement('td');

        tdName.innerText = name;
        tdValue.innerText = value;

        row.append(tdName);
        row.append(tdValue);

        innerBody.append(row);
      })

    </script>
  </tr>
</table>

推荐阅读