javascript - 如何将 JS/HTML 页面的结果以表格格式放置？

Question

我已经为调查创建了 JS/Html 页面，但我想在单击提交按钮后以表格格式显示调查页面的结果。现在它不是以表格格式出现的，答案是分段来的。我想要一个最终答案，它以表格格式显示单个部分的结果和两个部分的总数。提前致谢

.js 文件：

function displayRadioValue() {
let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
let section1Total = 0
let section2Total = 0
let section1Question = 0
let section2Question = 0
let section1Res = document.querySelector('.section-1-results')
let section2Res = document.querySelector('.section-2-results')
let result1 = ''
let result2 = ''

//Section 1
section1.forEach(function(radio, index) {
  if (radio.checked) {
   section2Question++
   section1Total += +radio.value
  }
 })

//Section 2
section2.forEach(function(radio, index) {
  if (radio.checked) {
    section1Question++
    section2Total += +radio.value
  }
 })

//Section 1
result1 += "<b>Results:</b><br>"
result1 += "Total: " + section1Total + "<br>"
result1 += "Percentage: " + ((section1Total / (section2Question * 3)) * 100).toFixed(2) + "%"
section1Res.innerHTML = result1

 //Section 2
result2 += "<b>Results:</b><br>"
result2 += "Total: " + section2Total + "<br>"
result2 += "Percentage: " + ((section2Total / (section2Question * 3)) * 100).toFixed(2) + "%"
 section2Res.innerHTML = result2

}

网页：

<p>
Select a radio button and click on Submit.
</p>
<div class="section-1">

<h2>Section 1</h2>
question 1:
<input type="radio" name="question1" value="1">1
<input type="radio" name="question1" value="2">2
<input type="radio" name="question1" value="3">3

<br> question 2:
<input type="radio" name="question2" value="1">1
<input type="radio" name="question2" value="2">2
<input type="radio" name="question2" value="3">3

<br> question 3:
<input type="radio" name="question3" value="1">1
<input type="radio" name="question3" value="2">2
<input type="radio" name="question3" value="3">3

</div>
<br>
<div class="section-1-results"></div>

<div class="section-2">

 <h2>Section 2</h2>
 question 1:
 <input type="radio" name="question4" value="1">1
 <input type="radio" name="question4" value="2">2
 <input type="radio" name="question4" value="3">3

 <br> question 2:
 <input type="radio" name="question5" value="1">1
 <input type="radio" name="question5" value="2">2
 <input type="radio" name="question5" value="3">3
 <br> question 3:
 <input type="radio" name="question6" value="1">1
 <input type="radio" name="question6" value="2">2
 <input type="radio" name="question6" value="3">3
 <br> question 4:
 <input type="radio" name="question7" value="1">1
 <input type="radio" name="question7" value="2">2
 <input type="radio" name="question7" value="3">3
  </div>
 <br>

 <div class="section-2-results"></div>

 <br>

 <button type="button" onclick="displayRadioValue()">
   Submit
  </button>

标签： javascripthtml

Answer 1

function displayRadioValue() {
  let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
  let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
  let section1Total = 0
  let section2Total = 0
  let section1Question = 0
  let section2Question = 0
  let section1Res = document.querySelector('.section-1-results')
  let section2Res = document.querySelector('.section-2-results')
  let result1 = ''
  let result2 = ''

  //Section 1
  section1.forEach(function(radio, index) {
    if (radio.checked) {
      section2Question++
      section1Total += +radio.value
    }
  })

  //Section 2
  section2.forEach(function(radio, index) {
    if (radio.checked) {
      section1Question++
      section2Total += +radio.value
    }
  })

  //Section 1
  section1Res.innerHTML = generateResultTable(section1Question, section1Total)

  //Section 2
  section2Res.innerHTML = generateResultTable(section2Question, section2Total)
}

function generateResultTable(checkedQuestion, total) {
  var result = "<b>Results:</b><br>"
  var tr = "<tr><th>" + total + "</th><th>" + ((total / (checkedQuestion * 3)) * 100).toFixed(2) + "</th></tr>"
  result += "<table><thead><tr><th>Total</th><th>Percentage</th></tr></thead><tbody>" + tr + "</tbody></table>"

  return result
}

table,
table tr th,
table tr td {
  border: 1px solid #0094ff;
}

<p>
  Select a radio button and click on Submit.
</p>
<div class="section-1">

  <h2>Section 1</h2>
  question 1:
  <input type="radio" name="question1" value="1">1
  <input type="radio" name="question1" value="2">2
  <input type="radio" name="question1" value="3">3

  <br> question 2:
  <input type="radio" name="question2" value="1">1
  <input type="radio" name="question2" value="2">2
  <input type="radio" name="question2" value="3">3

  <br> question 3:
  <input type="radio" name="question3" value="1">1
  <input type="radio" name="question3" value="2">2
  <input type="radio" name="question3" value="3">3

</div>
<br>
<div class="section-1-results"></div>

<div class="section-2">

  <h2>Section 2</h2>
  question 1:
  <input type="radio" name="question4" value="1">1
  <input type="radio" name="question4" value="2">2
  <input type="radio" name="question4" value="3">3

  <br> question 2:
  <input type="radio" name="question5" value="1">1
  <input type="radio" name="question5" value="2">2
  <input type="radio" name="question5" value="3">3
  <br> question 3:
  <input type="radio" name="question6" value="1">1
  <input type="radio" name="question6" value="2">2
  <input type="radio" name="question6" value="3">3
  <br> question 4:
  <input type="radio" name="question7" value="1">1
  <input type="radio" name="question7" value="2">2
  <input type="radio" name="question7" value="3">3
</div>
<br>

<div class="section-2-results"></div>
<br>

<div class="section-total-results"></div>
<br>

<button type="button" onclick="displayRadioValue()">
   Submit
  </button>

我封装了一个生成表格的方法，只需要传入两个参数：选题数和总题数