Javascript 如何将JS/HTML页面的结果以表格格式显示？

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

Js文件：

函数displayRadioValue（）{
让section1=document.querySelectorAll（'.section-1>input[type=“radio”]”）
让section 2=document.querySelectorAll（'.section-2>input[type=“radio”]”）
设第1节总计=0
设section2Total=0
让section1Question=0
让section2Question=0
设section1Res=document.querySelector（“.section-1-results”）
设section2Res=document.querySelector（“.section-2-results”）
让result1=''
让result2=''
//第一节
第1节forEach（功能（收音机、索引）{
如果（无线电检查）{
第二节问题++
第1节总+=+无线电值
}
})
//第二节
第2节forEach（功能（收音机、索引）{
如果（无线电检查）{
第1节问题++
第2节总+=+无线电值
}
})
//第一节
结果1+=“结果：
”
结果1+=“总计：+section1Total+”
“
结果1+=“百分比：”+（（第1部分总计/（第2部分问题*3））*100.toFixed（2）+“%””
section1Res.innerHTML=result1
//第二节
结果2+=“结果：
”
结果2+=“总计：+Section2总计+”
“
结果2+=“百分比：”+（（第2部分总计/（第2部分问题*3））*100.toFixed（2）+“%””
section2Res.innerHTML=result2
}

Html页面：

选择单选按钮并单击提交。

第一节
问题1：
1.
2.
3.

问题2：
1.
2.
3.

问题3：
1.
2.
3.


第二节
问题1：
1.
2.
3.

问题2：
1.
2.
3.

问题3：
1.
2.
3.

问题4：
1.
2.
3.




提交

函数displayRadioValue（）{
让section1=document.querySelectorAll（'.section-1>input[type=“radio”]”）
让section 2=document.querySelectorAll（'.section-2>input[type=“radio”]”）
设第1节总计=0
设section2Total=0
让section1Question=0
让section2Question=0
设section1Res=document.querySelector（“.section-1-results”）
设section2Res=document.querySelector（“.section-2-results”）
让result1=''
让result2=''
//第一节
第1节forEach（功能（收音机、索引）{
如果（无线电检查）{
第二节问题++
第1节总+=+无线电值
}
})
//第二节
第2节forEach（功能（收音机、索引）{
如果（无线电检查）{
第1节问题++
第2节总+=+无线电值
}
})
//第一节
section1Res.innerHTML=生成结果表（section1Question，section1Total）
//第二节
section2Res.innerHTML=GenerateResultable（section2Question，section2Total）
}
函数生成器结果表（已检查问题，总计）{
var result=“结果：
”
var tr=“”+total+”+（（total/（checkedQuestion*3））*100）。toFixed（2）+”
结果+=“总百分比”+tr+“”
返回结果
}

表格，
表tr-th，
表tr td{
边框：1px实心#0094ff；
}

选择单选按钮并单击提交。

第一节
问题1：
1.
2.
3.

问题2：
1.
2.
3.

问题3：
1.
2.
3.


第二节
问题1：
1.
2.
3.

问题2：
1.
2.
3.

问题3：
1.
2.
3.

问题4：
1.
2.
3.






提交

您只需在JS函数中创建一个动态的

表格

，该表格将

返回每个部分的
结果

我相信你想要一个
每个
部分的
最终答案，结果显示在底部

我还添加了一些验证，以确保用户必须为每个部分至少选择一个问题，这样表格就不会一直是空的。如果从
每个
部分中选择了问题，它将向用户显示一条错误
消息

我没有使用两个
结果
div，而是只使用一个
最终结果
，其中每个
部分
结果表将以表格格式显示

现场演示：


函数displayRadioValue（）{
让section1=document.querySelectorAll（'.section-1>input[type=“radio”]”）
让section 2=document.querySelectorAll（'.section-2>input[type=“radio”]”）
设第1节总计=0
设section2Total=0
让section1Question=0
让section2Question=0
让finalResults=document.querySelector（“.final results”）
让result1=''
让result2=''
finalResults.innerHTML=“”
//第一节
第1节forEach（功能（收音机、索引）{
如果（无线电检查）{
第二节问题++
第1节总+=+无线电值
}
})
//第二节
第2节forEach（功能（收音机、索引）{
如果（无线电检查）{
第1节问题++
第2节总+=+无线电值
}
})
//最终结果和验证
如果（第1节总计>0和第2节总计>0）{
finalResults.innerHTML+=genTable（第1部分问题，第1部分总计，1）
finalResults.innerHTML+=genTable（section2Question，section2Total，2）
}否则{
finalResults.innerHTML='Snap！请从每个部分中选择至少一个调查问题'
}
}
功能表（ques、total、section）{
var result=“Section”+Section+：
”
var tr=“”+总计+”+（（总计/（ques*3））*100）。toFixed（2）+”
结果+=“总分百分比”+tr+“”
返回结果
}
表格，
表tr-th，
表tr td{
边框：1px纯黑；
}

选择单选按钮并单击提交。

第一节
问题1：
1.
2.
3.

问题2：
1.
2.
3.

问题3：
1.
2.
3.
第二节
问题1：
1.
2.
3.

问题2：
1.
2.
3.