Javascript 以表格格式显示XML和JSON中的数据

我想以表格的形式显示我们从XML和JSON文件中检索的数据，如本小提琴上所示：

布局应与小提琴上的布局完全相同。我一直想把这个布局放在桌子上。请分享这两种情况（XML和JSON）的细节

我已经尝试过处理这个问题，但无法以完全相同的布局显示数据

数据如下：

XML:

那怎么办

/*XML解析结构，相当于xhr.responseXML*/
var structure=new DOMParser（）.parseFromString（'\
\
样品\
A1\
\
\
样本A-1\
孩子\
\
\
样本A-1\
子代\
\
\
样本A-1\
次级儿童2\
\
\
\
\
\
样本A-1\
儿童2\
\
\
样本A-1\
幼儿3\
\
\
样本A-1\
儿童4\
\
样本A-1\
幼儿5\
\
\
\
\
样本A-1\
儿童3\
\
\
\
\
\
样品\
A-2\
\
\
样本A-2\
孩子\
\
\
样本A-2\
子代\
\
\
样本A-2\
次级儿童2\
\
\
\
\
样本A-2\
儿童2\
\
\
样本A-2\
幼儿3\
\
\
样本A-2\
儿童4\
\
\
\
\
\
“，”text/xml“；
/*获取XML节点的文本*/
函数getText（节点）{
返回node.childNodes[0].nodeValue；
}
/*初始HTML缓冲区*/
var htmlBuffer=”\
\
样本A\
样本B\
样本C\
";
/*迭代每个客户投资指令*/
for（structure.getElementsByTagName（'ClientInvestmentInstruction'）的var指令）{
var headerDeclared=假；
/*迭代每个投资组合*/
for（指令的var组合.getElementsByTagName（'portfolio'））{
htmlBuffer+=“”；
/*将样本声明为数据*/
htmlBuffer+=“”；
/*
*如果未声明指令RGName和代码，
*那就申报两个吧
*/
如果（！headerDeclared）{
htmlBuffer+=getText（指令.getElementsByTagName（'InstructionGorgName'）[0]）+“”+
getText（指令.getElementsByTagName（'InstructionGorgCode'）[0]）；
headerDeclared=真；
}
htmlBuffer+=“”；
/*声明示例B数据*/
htmlBuffer+=“”+getText（portfolio.getElementsByTagName（'PortfolioName'）[0]）+“”+
getText（portfolio.getElementsByTagName（'PortfolioCode'）[0]）+
"";
/*获得资金*/
var FundList=portfolio.getElementsByTagName（“基金”）；
/*检查是否存在任何资金*/
if（FundList.length）{
/*迭代每个基金*/
对于（var i=0，基金；基金=FundList[i]；i++）{
/*在示例C数据中声明基金*/
htmlBuffer+=（i>0？）+“
htmlBuffer+=getText（fund.getElementsByTagName（'FundName'）[0]）+“”+
getText（fund.getElementsByTagName（'FundCode'）[0]）；
htmlBuffer+=“”；
}
}
/*将样本C留空*/
其他的
htmlBuffer+=“”；
/*投资组合/基金结束*/
htmlBuffer+=“”；
}
htmlBuffer+=“”；
}
htmlBuffer+=“”；
//测试
document.body.innerHTML=htmlBuffer
表格，thead，tr，td{
边框：1px纯黑；
边界塌陷：塌陷；
}
th，td{
填充：15px；
}
泰德{
背景色：#BBB；
}
您已经尝试了什么？您刚刚发布了数据表单和XML处理。你使用任何框架还是纯javascript？我已经试过了——我正在用AJAX方法使用纯javascript。如果愿意，您可以使用jQuery自由地尝试这一点。非常感谢@nicematt你能不能也分享一下你对XML的见解，这将非常有帮助。@DeepanshuKaushik完成了！
<ClientInvestmentInstructionList>
    <ClientInvestmentInstruction>
        <InstructingOrgName>Sample</InstructingOrgName>
        <InstructingOrgCode>A1</InstructingOrgCode>
        <PortfolioList>
            <Portfolio>
                <PortfolioName>Sample A-1</PortfolioName>
                <PortfolioCode>Child</PortfolioCode>
                <AuthorizeFundList>
                    <Fund>
                        <FundName>Sample A-1</FundName>
                        <FundCode>Sub-child</FundCode>
                    </Fund>
                    <Fund>
                        <FundName>Sample A-1</FundName>
                        <FundCode>Sub-child 2</FundCode>
                    </Fund>
                </AuthorizeFundList>
            </Portfolio>

            <Portfolio>
                <PortfolioName>Sample A-1</PortfolioName>
                <PortfolioCode>Child 2</PortfolioCode>
                <AuthorizeFundList>
                    <Fund>
                        <FundName>Sample A-1</FundName>
                        <FundCode>Sub-child 3</FundCode>
                    </Fund>
                    <Fund>
                        <FundName>Sample A-1</FundName>
                        <FundCode>Sub-child 4</FundCode>
                    </Fund><Fund>
                        <FundName>Sample A-1</FundName>
                        <FundCode>Sub-child 5</FundCode>
                    </Fund>
                </AuthorizeFundList>
            </Portfolio>
            <Portfolio>
                <PortfolioName>Sample A-1</PortfolioName>
                <PortfolioCode>Child 3</PortfolioCode>
            </Portfolio>
        </PortfolioList>
    </ClientInvestmentInstruction>

    <ClientInvestmentInstruction>
        <InstructingOrgName>Sample</InstructingOrgName>
        <InstructingOrgCode>A-2</InstructingOrgCode>
        <PortfolioList>
            <Portfolio>
                <PortfolioName>Sample A-2</PortfolioName>
                <PortfolioCode>Child</PortfolioCode>
                <AuthorizeFundList>
                    <Fund>
                        <FundName>Sample A-2</FundName>
                        <FundCode>Sub-child</FundCode>
                    </Fund>
                    <Fund>
                        <FundName>Sample A-2</FundName>
                        <FundCode>Sub-child 2</FundCode>
                    </Fund>
                </AuthorizeFundList>
            </Portfolio>
            <Portfolio>
                <PortfolioName>Sample A-2</PortfolioName>
                <PortfolioCode>Child 2</PortfolioCode>
                <AuthorizeFundList>
                    <Fund>
                        <FundName>Sample A-2</FundName>
                        <FundCode>Sub-child 3</FundCode>
                    </Fund>
                    <Fund>
                        <FundName>Sample A-2</FundName>
                        <FundCode>Sub-child 4</FundCode>
                    </Fund>
                </AuthorizeFundList>
            </Portfolio>
        </PortfolioList>
    </ClientInvestmentInstruction>
</ClientInvestmentInstructionList>

{"ClientInvestmentInstructionList": {
    "ClientInvestmentInstruction": [
      {
        "InstructingOrgName": "Sample",
        "InstructingOrgCode": "A1",
        "PortfolioList": {
          "Portfolio": [
            {
              "PortfolioName": "Sample A-1",
              "PortfolioCode": "Child",
              "AuthorizeFundList": {
                "Fund": [
                  {
                    "FundName": "Sample A-1",
                    "FundCode": "Sub-child"
                  },
                  {
                    "FundName": "Sample A-1",
                    "FundCode": "Sub-child 2"
                  }
                ]
              }
            },
            {
              "PortfolioName": "Sample A-1",
              "PortfolioCode": "Child 2",
              "AuthorizeFundList": {
                "Fund": [
                  {
                    "FundName": "Sample A-1",
                    "FundCode": "Sub-child 3"
                  },
                  {
                    "FundName": "Sample A-1",
                    "FundCode": "Sub-child 4"
                  },
                  {
                    "FundName": "Sample A-1",
                    "FundCode": "Sub-child 5"
                  }
                ]
              }
            },
            {
              "PortfolioName": "Sample A-1",
              "PortfolioCode": "Child 3"
            }
          ]
        }
      },
      {
        "InstructingOrgName": "Sample",
        "InstructingOrgCode": "A-2",
        "PortfolioList": {
          "Portfolio": [
            {
              "PortfolioName": "Sample A-2",
              "PortfolioCode": "Child",
              "AuthorizeFundList": {
                "Fund": [
                  {
                    "FundName": "Sample A-2",
                    "FundCode": "Sub-child"
                  },
                  {
                    "FundName": "Sample A-2",
                    "FundCode": "Sub-child 2"
                  }
                ]
              }
            },
            {
              "PortfolioName": "Sample A-2",
              "PortfolioCode": "Child 2",
              "AuthorizeFundList": {
                "Fund": [
                  {
                    "FundName": "Sample A-2",
                    "FundCode": "Sub-child 3"
                  },
                  {
                    "FundName": "Sample A-2",
                    "FundCode": "Sub-child 4"
                  }
                ]
              }
            }
          ]
        }
      }
    ]
  }