Javascript 使用扩展和折叠功能在jQuery数据表中显示XML数据

我正在我的项目中使用jQuery。我对jQuery非常陌生，现在正在学习这些东西。我的要求是在数据表中显示XML数据，并具有扩展和折叠功能

我的XML将如下所示：

案例一
案例二
第一期
第二期
案例三
案例四
第三期
第四期

每个

（父项）包含很少的

标记（子项）。展开

后，应打开子项

我必须在jQuery数据表中呈现上述XML数据，并向其添加扩展和折叠功能。 我浏览了下面的链接，了解了一些关于处理JSON响应的内容

通过使用上述链接中给出的信息，我可以呈现父标记

，但无法呈现相应父标记下的子标记

，即

有人能帮我吗

我尝试的代码如下所示：

$（“.dataTables\u scrollBody”）.find（“.details控件”）.on（“单击”，函数（））{
var tr=$（this.nexist（'tr'）；
var行=表.行（tr）；
if（row.child.isShown（））{
//此行已打开-关闭它
row.child.hide（）；
tr.removeClass（“显示”）；
}否则{
//打开这一排
row.child（'hello'）.show（）；
tr.addClass（“显示”）；
}
});

我只是试着将硬编码的值

hello

就地呈现给孩子们。但实际上，当它展开时，我已经在

下渲染了

---

有人能帮我吗？

我可以让你先走一步。我已经获取了您的示例XML并在JSON数组中解析它

HTML:

<div id="demo_jui">
    <table id="events" class="display">
            <thead>
                    <tr>
                        <th>Column 1</th>
                        <th>Column 2</th>
                        <th>Issuer</th>

                    </tr>
            </thead>
            <tbody>
            </tbody>
    </table>
</div>

var thisTable = $("#events").dataTable();

//Simulated data response
var data = {
    xml: "<root><case><case-column-one>case-one</case-column-one><case-column-two>case-two</case-column-two><issue><issue-column-one>issue-one</issue-column-one><issue-column-two>issue-two</issue-column-two></issue></case><case><case-column-three>case-three</case-column-three><case-column-four>case-four</case-column-four><issue><issue-column-three>issue-three</issue-column-three><issue-column-four>issue-four</issue-column-four></issue></case></root>"
}

$.ajax({
    url:"/echo/xml/",
    data:data,
    type:"POST",
    success: function(response){
        var $events = $(response).find("case");

        $events.each(function(index, event){
            var $event = $(event),
                addData = [];

            $event.children().each(function(i, child){
                addData.push($(child).text());
            });

            thisTable.fnAddData(addData);
        });
    }
});

第1栏
第2栏
发行人

JS:

<div id="demo_jui">
    <table id="events" class="display">
            <thead>
                    <tr>
                        <th>Column 1</th>
                        <th>Column 2</th>
                        <th>Issuer</th>

                    </tr>
            </thead>
            <tbody>
            </tbody>
    </table>
</div>

var thisTable = $("#events").dataTable();

//Simulated data response
var data = {
    xml: "<root><case><case-column-one>case-one</case-column-one><case-column-two>case-two</case-column-two><issue><issue-column-one>issue-one</issue-column-one><issue-column-two>issue-two</issue-column-two></issue></case><case><case-column-three>case-three</case-column-three><case-column-four>case-four</case-column-four><issue><issue-column-three>issue-three</issue-column-three><issue-column-four>issue-four</issue-column-four></issue></case></root>"
}

$.ajax({
    url:"/echo/xml/",
    data:data,
    type:"POST",
    success: function(response){
        var $events = $(response).find("case");

        $events.each(function(index, event){
            var $event = $(event),
                addData = [];

            $event.children().each(function(i, child){
                addData.push($(child).text());
            });

            thisTable.fnAddData(addData);
        });
    }
});

var thisTable=$（“#事件”）.dataTable（）；
//模拟数据响应
风险值数据={
xml：“案例一案例二问题一问题二案例三案例四问题三问题四”
}
$.ajax({
url:“/echo/xml/”，
数据：数据，
类型：“POST”，
成功：功能（响应）{
var$events=$（response.find（“case”）；
$events.each（函数（索引、事件）{
变量$event=$（事件），
addData=[]；
$event.children（）{
addData.push（$（child.text（））；
});
此表.fnAddData（addData）；
});
}
});

---

工作代码

您可以试试这个。将XML转换为JSON@Ashish Kumar，是否具有扩展和折叠功能？否。。但是一旦Json就绪，您就可以轻松添加它了。。就像你在家里做的那样example@AshishKumar，您的意思是应该将xml转换为json吗？好的。。问题中没有提到限制。。xml数据总是简单明了的…另外还有一个建议。很抱歉最近回复了。