Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
400 views
in Technique[技术] by (71.8m points)

javascript - Element.append() generates unnecessary column

I want to style my table, which states an output of my HTML form.

The table was meant to include 2 columns only. I used the Element.append() method for pushing my HTML form data through.

My code looks as follows:

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

I don't know why my script creates an additional empty column!

I would like to have my data placed within the operator by using the script above. Is it possible with Element.append() method, or maybe should I go with Element.insertAdjacentHTML()

enter image description here

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You've messed up the mark up nesting. The correct way to do it is like this (it's always good to avoid writing one liner if you don't understand the structure well)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...